JavaScript——延遲加載技術

       自從接觸電腦開始,就迷戀了兩部動漫,火影和死神,記得以前看的時候,要等圖片完全加載完成才能看到,最近半年的時間,發現打開漫畫的速度是越來越快了,加載的方式也發生了一些變化。

        查了一下,才知道他們使用了一種新的加載技術——圖片延遲加載技術,那麼什麼纔是圖片延遲加載技術(ImageLazyLoad)呢?

        在頁面上圖片比較多的時候,打開一張頁面必然引起與服務器大數據量的交互。尤其是對於高清晰的圖片,佔的幾M的空間。ImageLazyLoad技術就是,當前可是界面的圖片是加載進來的,而不可見頁面(通過滾動條下拉可見)中的圖片是不加載的,這樣勢必會引起速度上質的提升。

        眼下網上使用此技術的網站有太多太多,如淘寶,還有一些動漫網站,他們都使用了這種技術。

        眼下比較常用的圖片延遲加載技術有四種:kissy(淘寶的JS框架),Jquery 圖片延遲插件,Prototype,YUI 2。

        抽時間去網上查查了,YUI的圖片延遲技術是就成熟的,Jquery的圖片延遲插件的設計靈感就來自於YUI的延遲技術(Lazyloader is inspired by YUI ImageLoader Utility by Matt Mlinac),閒話不說,一起來看看如何使用。

1.導入JS插件

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

 

2.在你的頁面中加入如下的javascript: 

$("img").lazyload();  

這將會使所有的圖片都延遲加載。 

當然插件還有幾個配置項可供設置。

 1.改變threshold

 $(“img”).lazyload({ threshold : 200 });

 把閥值設置成200 意思就是當圖片沒有看到之前先load 200像素。

 2.當然了你也可以通過設置佔位符圖片和自定事件來觸發加載圖片事件

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

3.可以通過定義effect 參數來定義一些圖片顯示效果

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

 LazyLoad(延遲加載)技術不僅僅用在對網頁中圖片的延遲加載,對數據同樣可以,Google ReaderBing圖片搜索就把LazyLoad技術運用的淋漓盡致;

但做爲技術而言沒有十全十美的技術,缺點也是有的:

1.與Ajax技術的衝突;

2.圖片的延遲加載,遇到高度特別高的圖片,會出現停止加載的問題;

3.寫代碼不規範的朋友要注意了,不管由於什麼原因,如果您的頁面中,img標籤的height屬性未定義,那麼我建議您最好不要使用ImageLazyLoad。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章