Jquery圖片延遲載入外掛程式jquery.lazyload.js的使用方法_jquery

最新版的jquery.lazyload.js已不再是偽的延遲載入了

一、請依照基本使用方法說明設定

複製程式碼 程式碼如下:

//載入JavaScript 檔

複製程式碼

代碼如下:


//img標籤的4個屬性一個都不能少個屬性一個都不能少個屬性，否則無法達到延遲載入的效果，如下：

複製程式碼

程式碼如下:


//使用
$(function() {$(function() {$(function() {$(function() {$(function() {$(function() {$(function() {$(function() {$(function() {$(function() {$(function() {
    $("img.lazy").lazyload();

});

二、常用屬性說明

複製程式碼

代碼如下:


threshold : 200  還有200像素就開始載入effect : "fadeIn" //使用淡入特效

failure_limit : 10 //容差範圍，一定要設定此值，原因說明請參考原文檔

container: $("#container") //使用父容器，父容器的CSS樣式至少應包含"height: 600px;overflow: scroll;"兩個屬性

event : "click" //修改觸發事件為點選

三、參考

英文參考：http://www.appelsiini.net/projects/lazyload

中文參考：http://code.ciaoca.com/jquery/lazyload/