图片懒加载--lazyload.js的用法

Posted 2020-09-13 Yukiee

　　　　这几天公司的项目已经完成的差不多了，只剩下各种优化问题。今天着重于图片加载的优化。当一个页面需要下拉很长而且又有过多的图片要加载时，就会发生很多http请求，就会拉慢网页加载速度，用户体验不友好。怎么解决这个问题呢？jQuery插件库中有个插件lazyload.js可以实现图片懒加载。

　　　　lazyload.js的原理就是将真正要加载的图片的地址放在另一个属性中，而图片的src的地址则是一个1px *1px的占位图，这样在网页加载过程中，首先下载的是这个占位图，当网页加载完成后，下拉页面时再下载在可视区域中的图片。

　　　　首先要在html中加入外联js文件，因为lazyload.js插件是基于jQuery所编写的，因此还需要引用jQuery文件：

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

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

　　　　然后改变你想要懒加载的图片的属性值

   <img class="lazy" src="img/git.jpg" data-original="img/image1.jpg"  width="200" height="100" />

 　　  将图片的真正的地址放在data-original中，src只存放占位图的地址。给需要懒加载的图片定义一个类，方便jQuery获取元素。需要注意的是必须在css中设置好图片的宽和高，否则lazyload.js很可能会不起作用。

      现在就可以写执行懒加载的代码了：

  $(function(){
     $(‘.lazy‘).lazyload();      
  });

 　　这个时候就已经实现了图片的懒加载，但是lazyload.js里提供了一些控制图片出现效果的事件，使得图片的出现呈现更温和的效果。

    1.淡入

$(function(){
　　$(‘.lazy‘).lazyload({
　　　　effect:"fadeIn"
　　});
});

   2. 图片预加载
   lazyload.js就是依靠图片是否在可视区域内来判断是否要加载图片的，假如你想在图片还没到可视区域内部或者即将到可视区域的时候就已经加载好图片，就可以设置图片到可视区域的距离，例如当图片距窗口还有100px的时候就开始加载图片：

$(function(){
　　$(‘.lazy‘).lazyload({
　　　　threshold:100
　　});
});

  还有很多其他的控制事件，具体参考官网：http://www.appelsiini.net/projects/lazyload