最一段代碼,是一段原生的圖片加載器,可以實現如下功能,就目前自認為最牛X的頁面圖片加載器,已經過京東首頁測試,IE6 7 8,chrome ,
ff完美測試通過.
先說下它到底NB在哪里,
1.原生js實現,客戶端性能NB.,不依靠任何框架.
2.可以支持兩種方式的圖片加載
<img src="images/blank.png" data-src="images/abstract_brushes.jpg" data-defer="5000"/>
<img src="images/blank.png" data-src="images/abstract_lake.jpg" />
第一種方式表示這個圖片在dom加載完畢過后,圖片會在5S后才請求,第二種沒有deta-defer參數的表示圖片是滾動加載的,如果圖片出來在可視范圍
內會自動加載.延遲5000的前提條件是我的這段js代碼放在body之前,緊靠body
3.在bind scoll事件的時候不會平凡觸發加載圖片,中間會有個時間戳,這一步大大提升性能,不會因為用戶的不停滾動,而照成客戶端性能問題,
4. 凡是已經加載過得圖片,都不會再次去遍歷,這一步大大提升性能
5. 在scoll事件中所有得圖片都加載完畢了,后自動清除scroll事件,
6. 調用之簡單,nothingLazyLoad();就可以實現網站上所有得圖片lazyLoad,默認可以傳一個時間參數,如nothingLazyLoad(2000),表示這個頁面
的所有圖片都會在2000s以某種方式加載,其中就是上面第二點得2種方式加載,
接下來測試下京東首頁的圖片用我的loazLoad,那是什么效果,一個字犀利加效率,我的這個lazyLoad屬於作者個人心得所悟,占不貼我的
源碼,只有測試代碼, 我把京東網站上自帶的jQuery的 lazyLoad貼出來,然后刪除掉,用我的,
function lazyload(option) {
var settings = {
defObj: null,
defHeight: 0
};
settings = $.extend(settings, option || {});
var defHeight = settings.defHeight,
defObj = (typeof settings.defObj == "object") ? settings.defObj.find("img") : $(settings.defObj).find("img");
var pageTop = function () {
var d = document,
y = (navigator.userAgent.toLowerCase().match(/iPad/i) == "ipad") ? window.pageYOffset : Math.max(d.documentElement.scrollTop, d.body.scrollTop);
return d.documentElement.clientHeight + y - settings.defHeight
};
var imgLoad = function () {
defObj.each(function () {
if ($(this).offset().top <= pageTop()) {
var src2 = $(this).attr("src2");
if (src2) {
$(this).attr("src", src2).removeAttr("src2")
}
}
})
};
imgLoad();
$(window).bind("scroll", function () { imgLoad() }) }
以上代碼是他首頁里面的,我只是貼出來,然后把他刪掉,用我的lazyLoad,然后我會改掉他首頁img標簽的參數形式,用我這個組件肯定得按照我的
參數形式寫img標簽,兩種不同的加載方式,已列在優勢第二點,可以在一個頁面混合使用,比如一個圖片切換里面的所有圖片,
顯然是使用第一種參數形式,
好了,廢話不多說,上測試連接地址,性能NB那才叫NB.我的這個京東測試demo是兩種方法混合使用的,你會看到有得圖片會在7 8s后才會請求
測試地址:① nothingDemo1 ②nothingDemo2
是不是瀏覽起來很順暢,很NB的加載,其中demo中data-defer方式加載的圖片有logo,還有中間一點的圖片,大概是7 8s后才請求,其余圖片
大概都是滾動加載或者出現在可視范圍自動加載.我的實現代碼屬於個人作品,贊不公布,請大家諒解.但是上面我提供的六點優勢已經把思路
說的很清楚了.
如果能看懂這段代碼js的高手,忘指教,求留言.
代碼肯定在demo里面,想看的話自己找了.