圖片的懶載入以及jquery.lazyload.js的使用實例-js教程-PHP中文網

$.belowthefold = function(element, settings) {};    // 在视口下方$.rightoffold = function(element, settings) {};        // 在视口右方$.abovethetop = function(element, settings) {};        // 在视口上方$.leftofbegin = function(element, settings) {};        // 在视口左方

登入後複製

具體使用

1.頁面引入方式

由於延遲載入lazyload是依賴jquery的，所有頁面需要引入jquery，如下：

<script src="jquery.js?1.1.11"></script><script src="jquery.lazyload.js?1.1.11"></script>

登入後複製

基本寫法：

<img class="lazy" data-original="img/example.jpg" width="640" height="480">$(function() {
    $("img.lazy").lazyload();
});

登入後複製

其中的data-original 屬性存放真實的圖片url路徑。

小貼士：你必須設定圖片的寬度或高度在css中，否則外掛程式可能無法正常運作。

設定Threshold

預設圖片會出現在螢幕時載入. 如果你想提前載入圖片, 可以設定threshold 選項, 設定threshold 為200 令圖片在距離畫面200像素時提前載入。

$("img.lazy").lazyload({
    threshold : 200});

登入後複製

設定事件觸發載入

事件可以是任何jQuery 事件, 如: click 和mouseover. 你也可以使用自訂的事件, 如: sporty 和foobar . 預設情況下處於等待狀態, 直到使用者滾動到視窗上圖片所在位置. 在灰色佔位圖片被點擊之前阻止載入圖片, 你可以這樣做:

$("img.lazy").lazyload({
    event : "click"});

登入後複製

當然，你也可以用下面的這種方式實現延遲載入：

$(function() {
    $("img.lazy").lazyload({
        event : "sporty"});
});

$(window).bind("load", function() {var timeout = setTimeout(function() {
        $("img.lazy").trigger("sporty")
    }, 5000);
});

登入後複製

即是頁面載入完成5 秒後,再去執行圖片的懶載入。

延遲載入效果

當圖片完全載入的時候, 外掛預設地使用show() 方法來將圖顯示出來. 其實你可以使用任何你想用的特效來處理. 下面的程式碼使用FadeIn 效果：

$("img.lazy").lazyload({
    effect : "fadeIn"});

登入後複製

不支援JavaScript的瀏覽器的使用方式

幾乎所有瀏覽器的JavaScript 都是啟動的. 然而可能你仍希望能在不支援JavaScript 的客戶端展示真實圖片. 當瀏覽器不支援JavaScript 時優雅降級, 你可以將真實的圖片片段在寫