js插件---圖片懶加載lazyload

時間 2020-05-31

標籤插件圖片加載 lazyload 欄目 JavaScript 简体版

原文原文鏈接

js插件---圖片懶加載lazyload

1、總結

一句話總結：使用異常簡單，src裏面放加載的圖片，data-original裏面放原圖片，不懂的位置去官網或者github找API就好。

一、lazyload官網的API演示怎麼找到？

跟着github上面的網址一級一級的摸上去的，github上面顯示的資料有限html

官網地址：Lazyload Images After Five Second Delay
https://appelsiini.net/projects/lazyload/timeout/jquery

二、延時加載怎麼實現？

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

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()

這句話是正常的運行懶加載github

2、圖片懶加載lazyload

百度盤下載地址：

連接：https://pan.baidu.com/s/1MVLxVWgTAyke1smT0kVacQ 密碼：ikn4app

一、截圖

二、代碼

 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="width: 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。