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

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

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

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

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

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

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

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

下載地址： source, minified or packed

相關(guān)文章

最新評(píng)論