js插件---圖片懶加載echo.js結合 Amaze UI ScrollSpy 使用

時間 2019-11-19

標籤插件圖片加載 echo.js echo 結合 amaze scrollspy 使用欄目 JavaScript 简体版

原文原文鏈接

js插件---圖片懶加載echo.js結合 Amaze UI ScrollSpy 使用

1、總結

一句話總結：圖片懶加載echo.js結合 Amaze UI ScrollSpy 使用的效果就是：懶加載的基礎上面加上了動畫效果，好比fade

使用的話簡單到爆，卻是沒有什麼好說。css

2、圖片懶加載echo.js結合 Amaze UI ScrollSpy 使用

百度盤下載地址：

連接：https://pan.baidu.com/s/1TiZ2u6itIj4q9gVVpwQ5tg 密碼：cekohtml

一、截圖

二、代碼

 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>