[js開源組件開發]圖片懶加載lazyload

圖片懶加載lazyload

前端對請求的一種優化方式，為什么叫懶加載，無從查起，反正我當初一直認為它是滾動加載的一種類型。它主要是以圖片或背景在可視區域內時才顯示真正的圖片，減少src帶來的負荷。所以建議src里放置模糊小圖或正在加載中的圖，不要置空為好。

 

lazy-load

圖片懶加載 例子見DEMO ,它的git地址是：git

使用方法案例:

<img data-src="http://ott.wansecheng.com/weidian/wdgoods/1429250625186.jpg" alt="">
$('img').LazyLoad({
    container: window,
    event:'scroll',
    effect: 'show',
    effectArgs: 'slow',
    loadImg:'loading.gif',
    load: null,
    offset: 0
});

　　

或者

var obj = new LazyLoad();
obj.init({
    elements:'img',
    container: window,
    effect: 'show',
    event:'scroll',
    effectArgs: 'slow',
    loadImg:'loading.gif',
    load: null,
    offset: 0
});

 

---

屬性和方法

elements:

dom的集合，一般為需要懶加載的img標簽集合，如果是動態加載的內容，請在html加載完成之后再調用init

 

init:

初始化方法

 

container: window

觸發滾動條的容器，默認為window,可不傳

 

event:

容器觸發事件，默認為scroll

 

effect:

觸發的事件方法，默認為 show

 

effectArgs

要給effect傳的參數，可不傳

 

loadImg

加載等待時顯示的圖片地址，默認是一個1pxx1px的圖

 

offset:

與圖片的差值，默認0

 

load:function(img)

加載完成的回調,this指向當前對象