Jquery实现网站图片懒加载方法

对于我们在制作图片网站时，一个版面上有大量的图片。用户进入我们网站后，如果图片全部同时加载的话，会严重拖慢网页打开速度，影响用户浏览体验。

对于网页上有大量的图片时，解决加载时间过长的方法就是采用图片懒加载。

什么是图片懒加载

通俗的讲就是：当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。

图片懒加载原理

将页面里所有img属性src属性用data-xx代替，当页面滚动直至此图片出现在可视区域时，用js取到该图片的data-xx的值赋给src。

图片懒加载实现方法

网站实现图片懒加载有二种方法，下面学做网站论坛就把网站图片懒加载的二种方法写给广大自学建网站爱好者们。

方法一：jqueryLazyload方式（需要网站引入了jquery.js）

1. jquery图片懒加载所需要的JS文件jquery.lazyload.js。下载地址：https://www.xuewangzhan.com/xiazai/67915.html
2. 将jquery.lazyload.js文件上传到自己网站根目录下，使用以下的代码引入jquery.lazyload.js；

   
   <script src="/jquery.lazyload.js"></script>
   
   

3. 懒加载的图片样式必须为以下的代码样式：

   
   <img class="lazy-load" data-original="图片地址" width="640" height="480" alt="测试懒加载图片"/>
   
   

4. 在网页最底部放上以下的JS代码来实现图片懒加载控制；

   
   <script>
   
   $("img.lazy-load").lazyload({effect: "fadeIn"});
   
   </script>
   
   

5. 这样网页的图片就会实现延迟按需加载，大大提高网页的打开速度。

方法二：echo.js方式（无需jquery.js）

如果你的项目中没有依赖jquery，那么这将是个不错的选择，50行代码，压缩后才1k。

1. 下载图片懒加载所需要的JS文件。下载地址：https://github.com/helijun/helijun/tree/master/plugin/echo
2. 在自己网站的底部文件的</body>上方，放入以下的JS代码。
   <script src="js/echo.min.js"></script><script>Echo.init({
   offset: 0,//离可视区域多少像素的图片可以被加载
   throttle: 0 //图片延时多少毫秒加载
   });
   
   </script>
3. 图片样式代码如下：
    <img class="lazy" src="images/blank.gif" data-echo="images/big-1.jpg">
4. 说明：blank.gif是一张背景图片，包含在插件里了。图片的宽高必须设定，当然，可以使用外部样式对多张图片统一控制大小。data-echo指向的是真正的图片地址。