js插件---图片懒加载lazyload

一、总结

一句话总结：使用异常简单，src里面放加载的图片，data-original里面放原图片，不懂的位置去官网或者github找API就好。

 

 

1、lazyload官网的API演示怎么找到？

跟着github上面的网址一级一级的摸上去的，github上面显示的资料有限

官网地址：Lazyload Images After Five Second Delay

https://appelsiini.net/projects/lazyload/timeout/

 

2、延时加载怎么实现？

直接放到window的load方法里面等5s就好，

1 window.addEventListener("load", function(event) {2     let timeout = setTimeout(function() {3         $("img.lazy").lazyload({4             effect : 'fadeIn',5             event : 'sporty'6         });7     }, 5000);8 });

 

$("img.lazy").lazyload()

这句话是正常的运行懒加载

 

 

二、图片懒加载lazyload

百度盘下载地址：

链接：https://pan.baidu.com/s/1MVLxVWgTAyke1smT0kVacQ 密码：ikn4

 

1、截图

 

 

 

2、代码

1  2  3  4     
      5      6      7      8     14 15 16     17 18     
     
      19       
      点击载入图片20     
     
21 22     
     
23 24 46