欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jquery 插件實(shí)現(xiàn)圖片延遲加載效果代碼

 更新時間：2010年02月06日 13:57:51   作者：  
前幾天上QQ的在線視頻網(wǎng)站，看到上面的影片列表頁的圖片有這樣一種效果：當(dāng)向下拉動滾動條時下面的圖片才開始加載，就是說它不會一下子把所有的圖片都加載出來，拉動滾動條后用戶看到了才會顯示，這是一個很不錯的用戶體驗。
減少了頁面加載的時間了，也減輕了服務(wù)器的壓力，看了一下javascript源碼，里面寫的了lazyload，我就百度了一下，找到了一個jquery的實(shí)現(xiàn)這種效果的插件：jquery.lazyload，一個很不錯的插件。
比如你打開一個比較大或者長的網(wǎng)頁，那么Lazy load能夠?qū)崿F(xiàn)先加載您所看到區(qū)域的圖片，等你滾動到哪里，就加載那里的圖片。
如果你是圖片網(wǎng)站，而且一個頁面要加載很多圖片，這個插件是個很不錯的選擇。
如何使用，引用如下js：
查看源代碼打印幫助
復(fù)制代碼 代碼如下:

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

在你的頁面中加入如下的javascript：
查看源代碼打印幫助1 $("img").lazyload();
這將會使所有的圖片都延遲加載。插件還有幾個配置項可供設(shè)置。
當(dāng)然對于一些用戶來說就上面的功能遠(yuǎn)遠(yuǎn)是不能達(dá)到要求的，下面我們看看是如何設(shè)置靈敏度的。我們可以設(shè)置閥值來控制 這個功能比較人性化吧。
$(“img”).lazyload({ threshold : 200 });
把閥值設(shè)置成200 意思就是當(dāng)圖片沒有看到之前先load 200像素。當(dāng)然了你也可以通過設(shè)置占位符圖片和自定事件來觸發(fā)加載圖片事件
查看源代碼打印幫助
復(fù)制代碼 代碼如下:

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

我們還可以通過定義effect 參數(shù)來定義一些圖片顯示效果
查看源代碼打印幫助
復(fù)制代碼 代碼如下:

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

下載地址： source, minified or packed

相關(guān)文章

最新評論