關于lazyload圖片延遲加載簡單介紹
LazyLoad大家再熟悉不
過的一個jquery插件了，它可以延遲加載長頁面中的圖片.
也就是說在瀏覽器可視區域外的圖片不會被載入，直到用戶將頁面滾動到它們所在的位置才會加載并顯示出來，這和圖片預加載的處理方式正好剛好相反。圖片不多
的頁面時，效果并不太明顯，但是當頁面大圖片比較多的時候，這種效果就比較顯著了，明顯加快了頁面的加載速度。瀏覽器將會在加載可見圖片之后即進入就緒狀
態，在某些情況下還可以幫助降低服務器負擔。
因此，比較流行的wordpress主題，typecho主題，emlog主題等都使用了lazyload圖片延遲加載來實現快速加載頁面。
當然啦，你的網站純文字的，就沒必要多搞個jquery插件了。
怎樣使用lazyload？
其實很簡單，只需在你所使用頭部<head></head>標簽中插入下面一段代碼即可,你也可以添加到footer中。
<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:"https://cdn.aeink.com//content/templates/emlog_dux/images/loading.gif",
effect:"fadeIn"
});
});
</script>
以我的網站和現在使用的emlog大前端舉例子，我是習慣把js添加到底部的，路徑在/content/templates/emlog_dux/footer.php,把前面的代碼添加到</body>標簽前面就OK了。
如果你是其他主題的，找到footer.php文件，一般是在templates/你的主題/路徑下，把上述的代碼添加進去就行了。
若是使用了wordpress，typecho，emlog等其他博客后臺的，也差不多這樣改，往你的主題模板</head>或者</body>前上述代碼即可。
如果你希望沒看到圖片前先加載200px，可以通過設置閥值來控制，具體實現：
jQuery("img").lazyload({ threshold : 200 });
上面代碼比較通用，基本滿足你的網站圖片延遲加載需求。
值得一提的是：
-
lazyload依賴jquery，如果你的站點沒引用juery，請先引入jquery。
-
在上述代碼中，
img是延遲加載所有圖片，這里你可以根據不同模板作相應改動。比如我現在使用的大前端主題，可以改成.container img，這樣更改后，只延遲加載.container容器內的圖片，否則主題側邊的頭像和協議圖片也跟著延遲加載，等最后才加載出來。所以和我一樣使用大前端主題的最后把jQuery("img")改成jQuery(".container img")。使用其他模板的根據不同模板實際顯示效果自行更改。
轉載請注明出處 AE博客|墨淵 ? lazyload圖片延遲加載 適用所有類型
幾個WordPress 主題在線檢測工具 
EMLOG大前端4.5主題模板下載 
墨淵第十二版引導頁源碼 - 彩虹云任務引導頁模板 
虐心到極點的幾款游戲，你玩過幾個！ 
OneTool - 壹助手 多平臺助手程序 解密版
發表評論