前端实现图片懒加载(lazyload)的方式

图片懒加载是一种Web前端技术，其核心思想是在页面元素即将出现在可视区域时才进行资源加载。这可以大幅度提高网页的加载速度，提升用户的体验感。下面列举几种实现方式：

1. 使用JavaScript实现

// 获取所有需要懒加载的图片元素
var imgs = document.querySelectorAll('img[data-src]');

// 循环每个图片元素
for (var i = 0; i < imgs.length; i++) {
  // 判断图片是否进入可视区域
  if (imgs[i].getBoundingClientRect().top <= window.innerHeight) {
    // 加载图片
    imgs[i].src = imgs[i].getAttribute('data-src');
    imgs[i].removeAttribute('data-src');
  }
}

// 监听滚动事件，实现动态加载
window.addEventListener('scroll', function() {
  for (var i = 0; i < imgs.length; i++) {
    if (imgs[i].getBoundingClientRect().top <= window.innerHeight) {
      imgs[i].src = imgs[i].getAttribute('data-src');
      imgs[i].removeAttribute('data-src');
    }
  }
});

2. 使用jQuery实现

// 使用jQuery选择需要懒加载的图片元素
var $imgs = $('img[data-src]');

$imgs.each(function() {
  if ($(this).offset().top <= $(window).height()) {
    $(this).attr('src', $(this).attr('data-src'));
    $(this).removeAttr('data-src');
  }
});

$(window).on('scroll', function() {
  $imgs.each(function() {
    if ($(this).offset().top <= $(window).height()) {
      $(this).attr('src', $(this).attr('data-src'));
      $(this).removeAttr('data-src');
    }
  });
});

3. 使用第三方库实现

目前比较流行的图片懒加载库有：lazyload、lozad.js、Echo等。这些库通常提供了一些配置选项，比如设置预加载距离、占位符等，可以根据需要选择使用。

以上是三种实现图片懒加载的方式，需要注意的是，无论使用哪种方式，都需要在HTML中将需要懒加载的图片的src属性替换为data-src属性，并将真实的图片链接存储在data-src中。同时还需要实时检测图片是否进入可视区域并且动态加载。

最后介绍的echo.js方式

在前面“前端知识的一些总结”的博文中，介绍了一款非常简单实用轻量级的图片延时加载插件echo.js，如果你的项目中没有依赖jquery，那么这将是个不错的选择，50行代码，压缩后才1k。当然你完全可以集成到自己项目中去！

下载地址：https://github.com/helijun/helijun/tree/master/plugin/echo

<style>
　　.demo img { 　　　　width: 736px; 　　　　height: 490px; 　　　　background: url(images/loading.gif) 50% no-repeat;}
</style>

<script src="js/echo.min.js"></script>

<script>

Echo.init({
    offset: 0,//离可视区域多少像素的图片可以被加载　　 throttle: 0 //图片延时多少毫秒加载}); </script>

说明：Background.gif是一张背景图片，包含在插件里了。图片的宽高必须设定，当然，可以使用外部样式对多张图片统一控制大小。data-echo指向的是真正的图片地址。

总结：
不管哪一种方法都非常简单，解决问题的思路方式不变，只是jquery  lazyload多几个属性。其实常用的echo就足够了，并且完全可以集成到自己项目中的公共js中，图片懒加载是相当常见且简单实用的功能，如果你的项目中还是傻瓜式的一次性全部加载，那么请花更多吹牛的时间优化以下。