js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用
js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用
一、总结
一句话总结：图片懒加载echo.js结合 Amaze UI ScrollSpy 使用的效果就是：懒加载的基础上面加上了动画效果，比如fade
使用的话简单到爆，倒是没有什么好说。
二、图片懒加载echo.js结合 Amaze UI ScrollSpy 使用
百度盘下载地址：
链接：https://pan.baidu.com/s/1TiZ2u6itIj4q9gVVpwQ5tg 密码：ceko
1、截图
2、代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <link rel="stylesheet" href="./amazeui.min.css"> 7 <script src="./jquery.min.js"></script> 8 <script src="./amazeui.min.js"></script> 9 <script src="./echo.js"></script> 10 </head> 11 <body> 12 <div> 13 <img src="img/blank.gif" alt="Photo" data-echo="img/gallery_hk1.png"> 14 <img src="img/blank.gif" alt="Photo" data-echo="img/gallery_hk1.png"> 15 <img src="img/blank.gif" alt="Photo" data-echo="img/gallery_hk1.png"> 16 <img src="img/blank.gif" alt="Photo" data-echo="img/gallery_hk1.png"> 17 <img src="img/blank.gif" alt="Photo" data-echo="img/gallery_hk1.png"> 18 <img src="img/blank.gif" alt="Photo" data-echo="img/gallery_hk1.png"> 19 <img src="img/blank.gif" alt="Photo" data-echo="img/gallery_hk1.png"> 20 <img src="img/blank.gif" alt="Photo" data-echo="img/gallery_hk1.png"> 21 </div> 22 </body> 23 <!-- <script> 24 echo.init({ 25 offset: 100, 26 throttle: 250, 27 unload: false, 28 callback: function (element, op) { 29 console.log(element, 'has been', op + 'ed') 30 } 31 }); 32 33 // echo.render(); is also available for non-scroll callbacks 34 </script> --> 35 36 <script> 37 echo.init({ 38 callback: function(element, op) { 39 if (op === 'load') { 40 $(element).scrollspy({animation:'fade'}); 41 } 42 console.log(element, 'has been', op + 'ed') 43 } 44 }); 45 </script> 46 </html>
代码的效果就是懒加载的基础上面加上了fade的效果，也就是动画的效果
