獨立延遲加載圖像（不基於框架）

Question

我照顧一個網站，它必須在網頁上加載相當多的圖像和內容。我們儘可能地減少了元素和圖形佈局圖像的數量，所以我們現在正在尋找增加瀏覽器頁面加載的方法。

有誰知道延遲加載圖像，不需要像jQuery框架的任何代碼？

Answer 1

這是我自己的。玩的開心。

測試： IE 5.5+，FF 2+，鉻，歌劇9.6+

用法：

1. 您lazyloaded圖片應該有自己真正的src在拇指屬性

2. 只需在內部或外部包含JavaScript文件即可。

3. 如果你不想使用它你的整個頁面上，你可以這樣做：

   LazyImg().destroy(); // stop global fetching 
   LazyImg("watch-only-this-div"); 
   

   注：當您包括文件的全局實例已經創建凝視着整個文檔。你需要先停下來，開始你自己的實例。

4. 設置自定義用於預取偏移（多遠低於倍的圖像應該是取指）

   // watch the whole document 
   // prefetch offset: 300px 
   LazyImg(document, 300); 
   

代碼：

// 
// LAZY Loading Images 
// 
// Handles lazy loading of images in one or more targeted divs, 
// or in the entire page. It also keeps track of scrolling and 
// resizing events, and removes itself if the work is done. 
// 
// Licensed under the terms of the MIT license. 
// 
// (c) 2010 Balázs Galambosi 
// 

(function(){ 

// glocal variables 
var window = this, 
    instances = {}, 
    winH; 

// cross browser event handling 
function addEvent(el, type, fn) { 
    if (window.addEventListener) { 
    el.addEventListener(type, fn, false); 
    } else if (window.attachEvent) { 
    el.attachEvent("on" + type, fn); 
    } else { 
    var old = el["on" + type]; 
    el["on" + type] = function() { old(); fn(); }; 
    } 
} 

// cross browser event handling 
function removeEvent(el, type, fn) { 
    if (window.removeEventListener) { 
    el.removeEventListener(type, fn, false); 
    } else if (window.attachEvent) { 
    el.detachEvent("on" + type, fn); 
    } 
} 

// cross browser window height 
function getWindowHeight() { 
    if (window.innerHeight) { 
    winH = window.innerHeight; 
    } else if (document.documentElement.clientHeight) { 
    winH = document.documentElement.clientHeight; 
    } else if (document.body && document.body.clientHeight) { 
    winH = document.body.clientHeight; 
    } else {  // fallback: 
    winH = 10000; // just load all the images 
    } 
    return winH; 
} 

// getBoundingClientRect alternative 
function findPos(obj) { 
    var top = 0; 
    if (obj && obj.offsetParent) { 
    do { 
     top += obj.offsetTop || 0; 
     top -= obj.scrollTop || 0; 
    } while (obj = obj.offsetParent); // 
    return { "top" : top }; 
    } 
} 

// top position of an element 
var getTopPos = (function() { 
    var dummy = document.createElement("div"); 
    if (dummy.getBoundingClientRect) { 
    return function(el) { 
     return el.$$top || el.getBoundingClientRect().top; 
    }; 
    } else { 
    return function(el) { 
     return el.$$top || findPos(el).top; 
    }; 
    } 
})(); 

// sorts images by their vertical positions 
function img_sort(a, b) { 
    return getTopPos(a) - getTopPos(b); 
} 

// let's just provide some interface 
// for the outside world 
var LazyImg = function(target, offset) { 

    var imgs, // images array (ordered) 
     last, // last visible image (index) 
     id,  // id of the target element 
     self; // this instance 

    offset = offset || 200; // for prefetching 

    if (!target) { 
    target = document; 
    id = "$document"; 
    } else if (typeof target === "string") { 
    id = target; 
    target = document.getElementById(target); 
    } else { 
    id = target.id || "$undefined"; 
    } 

    // return if this instance already exists 
    if (instances[id]) { 
    return instances[id]; 
    } 

    // or make a new instance 
    self = instances[id] = { 

    // init & reset 
    init: function() { 
     imgs = null; 
     last = 0; 
     addEvent(window, "scroll", self.fetchImages); 
     self.fetchImages(); 
     return this; 
    }, 

    destroy: function() { 
     removeEvent(window, "scroll", self.fetchImages); 
     delete instances[id]; 
    }, 

    // fetches images, starting at last (index) 
    fetchImages: function() { 

     var img, temp, len, i; 

     // still trying to get the target 
     target = target || document.getElementById(id); 

     // if it's the first time 
     // initialize images array 
     if (!imgs && target) { 

     temp = target.getElementsByTagName("img"); 

     if (temp.length) { 
      imgs = []; 
      len = temp.length; 
     } else return; 

     // fill the array for sorting 
     for (i = 0; i < len; i++) { 
      img = temp[i]; 
      if (img.nodeType === 1 && img.getAttribute("thumb")) { 

       // store them and cache current 
       // positions for faster sorting 
       img.$$top = getTopPos(img); 
       imgs.push(img); 
      } 
     } 
     imgs.sort(img_sort); 
     } 

     // loop through the images 
     while (imgs[last]) { 

     img = imgs[last]; 

     // delete cached position 
     if (img.$$top) img.$$top = null; 

     // check if the img is above the fold 
     if (getTopPos(img) < winH + offset) { 

      // then change the src 
      img.src = img.getAttribute("thumb"); 
      last++; 
     } 
     else return; 
     } 

     // we've fetched the last image -> finished 
     if (last && last === imgs.length) { 
     self.destroy(); 
     } 
    } 
    }; 
    return self.init(); 
}; 

// initialize 
getWindowHeight(); 
addEvent(window, "load", LazyImg().fetchImages); 
addEvent(window, "resize", getWindowHeight  ); 
LazyImg(); 

window.LazyImg = LazyImg; 

}()); 

Answer 2

使用XHTML時，「拇指」不驗證。我將它改爲「標題」，似乎工作正常。