jquery 延遲加載圖片的 jQuery 插件

2017-05-02 1279 2 編輯:深圳網站建設 來源:互聯網

lazy load 依賴于 jquery. 請將下列代碼加入頁面 head 區域:

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

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

并且在你的執行代碼中加入下面語句: 

代碼如下

$("http://www.sdhowk.live/images/lazyload/img").lazyload();

這將使 id="http://www.sdhowk.live/images/lazyload/img" 區域下的圖片將被延遲加載.

設置敏感度

插件提供了 threshold 選項, 可以通過設置臨界值 (觸發加載處到圖片的距離) 來控制圖片的加載. 默認值為 0 (到達圖片邊界的時候加載).

代碼如下

$("http://www.sdhowk.live/images/lazyload/img").lazyload({ threshold : 200 });

將臨界值定為 200, 當可視區域離圖片還有 200 個象素的時候開始加載圖片. 

占位圖片

你還可以設定一個占位圖片并定義事件來觸發加載動作. 這時需要為占位圖片設定一個 url 地址. 透明, 灰色和白色的 1x1 象素的圖片已經包含在插件里面.

代碼如下

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

事件觸發加載

事件可以是任何 jquery 時間, 如: click 和 mouseo教程ver. 你還可以使用自定義的事件, 如: sporty 和 foobar. 默認情況下處于等待狀態, 直到用戶滾動到窗口上圖片所在位置. 在灰色占位圖片被點擊之前阻止加載圖片, 你可以這樣做:

代碼如下

$("img").lazyload({

 placeholder : "img/grey.gif",

 event : "click"

});

使用特效

當圖片完全加載的時候, 插件默認地使用 show() 方法來將圖顯示出來. 其實你可以使用任何你想用的特效來處理. 下面的代碼使用 fadein 效果. 這是演示頁面.

代碼如下

$("img").lazyload({ 

 placeholder : "img/grey.gif",

 effect : "fadein" 

});

圖片在容器里面

你可以將插件用在可滾動容器的圖片上, 例如帶滾動條的 div 元素. 你要做的只是將容器定義為 jquery 對象并作為參數傳到初始化方法里面. 這是水平滾動演示頁面和垂直滾動的演示頁面.

css教程 代碼:

代碼如下

#container {

 height: 600px;

 overflow: scroll;

}

javascript 代碼:

$("img").lazyload({

  placeholder : "img/grey.gif",

  container: $("#container")

});

當圖片不順序排列

滾動頁面的時候, lazy load 會循環為加載的圖片. 在循環中檢測圖片是否在可視區域內. 默認情況下在找到第一張不在可見區域的圖片時停止循環. 圖片被認為是流式分布的, 圖片在頁面中的次序和 html 代碼中次序相同. 但是在一些布局中, 這樣的假設是不成立的. 不過你可以通過 failurelimit 選項來控制加載行為.

代碼如下

$("img").lazyload({ 

 failurelimit : 10

});

將 failurelimit 設為 10 令插件找到 10 個不在可見區域的圖片是才停止搜索. 如果你有一個猥瑣的布局, 請把這個參數設高一點.

延遲加載圖片

lazy load 插件的一個不完整的功能, 但是這也能用來實現圖片的延遲加載. 下面的代碼實現了頁面加載完成后再加載. 頁面加載完成 5 秒后, 指定區域內的圖片會自動進行加載. 這是延遲加載演示頁面.

代碼如下

$(function() {

 $("img:below-the-fold").lazyload({

  placeholder : "img/grey.gif", 

  event : "sporty" 

 });

});

$(window).bind("load", function() { 

 var timeout = settimeout(function() {$("img").trigger("sporty")}, 5000);

});

專業的網站建設公司,深正互聯,如您有網站營銷需求,請您關注我們,或者致電13828884598


本站文章均為深正網站建設摘自權威資料,書籍,或網絡原創文章,如有版權糾紛或者違規問題,請即刻聯系我們刪除,我們歡迎您分享,引用和轉載,但謝絕直接搬磚和抄襲!感謝...
關注深正互聯
我們猜你喜歡
七星彩头尾