關於lazyload圖片延遲加載簡單介紹

時間 2019-11-12

標籤關於 lazyload 圖片延遲加載簡單介紹简体版

原文原文鏈接

LazyLoad你們再熟悉不過的一個jquery插件了，它能夠延遲加載長頁面中的圖片. 也就是說在瀏覽器可視區域外的圖片不會被載入，直到用戶將頁面滾動到它們所在的位置纔會加載並顯示出來，這和圖片預加載的處理方式正好恰好相反。圖片很少的頁面時，效果並不太明顯，可是當頁面大圖片比較多的時候，這種效果就比較顯著了，明顯加快了頁面的加載速度。瀏覽器將會在加載可見圖片以後即進入就緒狀態，在某些狀況下還能夠幫助下降服務器負擔。
所以，比較流行的wordpress主題，typecho主題，emlog主題等都使用了lazyload圖片延遲加載來實現快速加載頁面。javascript

固然啦，你的網站純文字的，就不必多搞個jquery插件了。php

怎樣使用lazyload？

其實很簡單，只需在你所使用頭部<head></head>標籤中插入下面一段代碼便可,你也能夠添加到footer中。html

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery-lazyload/1.9.5/jquery.lazyload.min.js"></script>
 <script type="text/javascript">
 jQuery(function() { 
 jQuery("img").lazyload({
 placeholder:"http://www.arao.me/loading.gif",
 effect:"fadeIn"
 });
 });
 </script>

以個人hexo網站和如今使用的next主題舉例子，我是習慣把js添加到底部的，找到_layout.swig,路徑在your-hexo-site\themes\next\layout,把前面的代碼添加到</body>標籤前面就OK了。
若是你是hexo其餘主題的，找到footer.ejs文件，通常是在themes/你的主題/layout/_partial/路徑下，把上述的代碼添加進去就好了。
如果使用了wordpress，typecho，emlog等其餘博客後臺的，也差很少這樣改，往你的主題模板</head>或者</body>前上述代碼便可,個人typecho網站也是這樣實現圖片延遲加載的。
若是你但願沒看到圖片前先加載200px，能夠經過設置閥值來控制，具體實現：java

1	jQuery("img").lazyload({ threshold : 200 });

上面代碼比較通用，基本知足你的網站圖片延遲加載需求。
值得一提的是：jquery

lazyload依賴jquery，若是你的站點沒引用juery，請先引入jquery。
在上述代碼中，img是延遲加載全部圖片，這裏你能夠根據不一樣模板做相應改動。好比我如今使用的next主題，能夠改爲#posts img，這樣更改後，只延遲加載#posts容器內的圖片，不然主題側邊的頭像和協議圖片也跟着延遲加載，等最後才加載出來。因此和我同樣使用next主題的最後把jQuery("img")改爲jQuery("#posts img")。使用其餘模板的根據不一樣模板實際顯示效果自行更改
詳細例子瀏覽器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>圖片加載技術實例-歡迎關注tinyphp的博客</title> <SCRIPT src="jquery.js" type=text/javascript></SCRIPT> <SCRIPT src="jquery.lazyload.js" type=text/javascript></SCRIPT> <script type="text/javascript" charset="utf-8"> $(function() { $("img").lazyload({ placeholder : "images/loading.gif", effect: "fadeIn" }); }); </script> <style> img a,img{border:0px;} div{ margin-bottom:10px;} </style> </head> <body> <img src="images/0.jpg" /><br /> <div><a href="#"><img src="images/loading.gif" data-original="images/1.jpg"></a></div> <div><a href="#"><img src="images/loading.gif" data-original="images/2.jpg"></a></div> <div><a href="#"><img src="images/loading.gif" data-original="images/3.jpg"></a></div> <div><a href="#"><img src="images/loading.gif" data-original="images/4.jpg"></a></div> <div><a href="#"><img src="images/loading.gif" data-original="images/5.jpg"></a></div> <div><a href="#"><img src="images/loading.gif" data-original="images/6.jpg"></a></div> <div><a href="#"><img src="images/loading.gif" data-original="images/7.jpg"></a></div> <div><a href="#"><img src="images/loading.gif" data-original="images/8.jpg"></a></div> <div><a href="#"><img src="images/loading.gif" data-original="images/9.jpg"></a></div> <div><a href="#"><img src="images/loading.gif" data-original="images/10.jpg"></a></div> </body> </html>

相關標籤/搜索

每日一句

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