jquery 插件實現圖片延遲加載效果代碼

2019-11-21 00:46:19

字體：大中小

來源：轉載

供稿：網友

減少了頁面加載的時間了，也減輕了服務器的壓力，看了一下javascript源碼，里面寫的了lazyload，我就百度了一下，找到了一個jquery的實現這種效果的插件：jquery.lazyload，一個很不錯的插件。
比如你打開一個比較大或者長的網頁，那么Lazy load能夠實現先加載您所看到區域的圖片，等你滾動到哪里，就加載那里的圖片。
如果你是圖片網站，而且一個頁面要加載很多圖片，這個插件是個很不錯的選擇。
如何使用，引用如下js：
查看源代碼打印幫助

復制代碼代碼如下:

 
<script src="jquery.js" type="text/javascript"></script> 
<script src="jquery.lazyload.js" type="text/javascript"></script> 

在你的頁面中加入如下的javascript：
查看源代碼打印幫助1 $("img").lazyload();
這將會使所有的圖片都延遲加載。插件還有幾個配置項可供設置。
當然對于一些用戶來說就上面的功能遠遠是不能達到要求的，下面我們看看是如何設置靈敏度的。我們可以設置閥值來控制這個功能比較人性化吧。
$(“img”).lazyload({ threshold : 200 });
把閥值設置成200 意思就是當圖片沒有看到之前先load 200像素。當然了你也可以通過設置占位符圖片和自定事件來觸發加載圖片事件
查看源代碼打印幫助

復制代碼代碼如下:

 
$("img").lazyload({ 
placeholder : "img/grey.gif", 
event : "click" 
}); 

我們還可以通過定義effect 參數來定義一些圖片顯示效果
查看源代碼打印幫助

復制代碼代碼如下:

 
$("img").lazyload({ 
placeholder : "img/grey.gif", 
effect : "fadeIn" 
}); 

下載地址： source, minified or packed

上一篇：javascript小數計算出現近似值的解決辦法

下一篇：Lazy Load 延遲加載圖片的 jQuery 插件

學習交流

索泰發布一款GTX 1070 Mini迷你版本:小機

索泰發布一款GTX 1070 Mini迷你版本:小機箱大愛...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注

国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

jquery 插件實現圖片延遲加載效果代碼