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 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script src="jquery.min.js"></script> 7 <script src="amazeui.lazyload.js"></script> 8 <style> 9 .lazy { 10 margin: 10px auto; 11 background: url(docs/img/loading.gif) no-repeat center center; 12 } 13 </style> 14 </head> 15 <body> 16 <img class="lazy" src="docs/img/loading.gif" data-original="docs/img/bmw_m1_hood.jpg" width="640" height="480"> 17 18 <div id="container"> 19 <button type="button" class="am-btn am-btn-danger">点击载入图片</button> 20 </div> 21 22 <div class="lazy" data-original="docs/img/bmw_m1_hood.jpg" style=" 765px; height: 574px;"></div> 23 </body> 24 <script> 25 26 27 window.addEventListener("load", function(event) { 28 let timeout = setTimeout(function() { 29 $("img.lazy").lazyload({ 30 effect : 'fadeIn', 31 event : 'sporty' 32 }); 33 }, 5000); 34 }); 35 36 $('#container').one('click', function() { 37 $('#container').load('test.html', function(response, status, xhr) { 38 $('img.lazy').lazyload(); 39 }); 40 }); 41 42 $('div.lazy').lazyload({ 43 effect : 'fadeIn' 44 }); 45 </script> 46 </html>