檢視示範 website 立即下載下傳
插件描述：jQuery圖檔延遲加載插件jQuery.lazyload,使用延遲加載在可提高網頁下載下傳速度。在某些情況下，它也能幫助減輕伺服器負載。
使用方法
引用jquery和jquery.lazyload.js到你的頁面
1
2
<code><</code><code>script</code> <code>src</code><code>=</code><code>"jquery-1.11.0.min.js"</code><code>></</code><code>script</code><code>></code>
<code><</code><code>script</code> <code>src</code><code>=</code><code>"jquery.lazyload.js?v=1.9.1"</code><code>></</code><code>script</code><code>></code>
html圖檔調用方法
為圖檔加入樣式lazy 圖檔路徑引用方法用data-original
3
4
5
6
<code><</code><code>img</code> <code>class</code><code>=</code><code>"lazy"</code> <code>data-original</code><code>=</code><code>"img/bmw_m1_hood.jpg"</code><code>></code>
<code><</code><code>img</code> <code>class</code><code>=</code><code>"lazy"</code> <code>data-original</code><code>=</code><code>"img/bmw_m1_side.jpg"</code><code>></code>
<code><</code><code>img</code> <code>class</code><code>=</code><code>"lazy"</code> <code>data-original</code><code>=</code><code>"img/viper_1.jpg"</code><code>></code>
<code><</code><code>img</code> <code>class</code><code>=</code><code>"lazy"</code> <code>data-original</code><code>=</code><code>"img/viper_corner.jpg"</code><code>></code>
<code><</code><code>img</code> <code>class</code><code>=</code><code>"lazy"</code> <code>data-original</code><code>=</code><code>"img/bmw_m3_gt.jpg"</code><code>></code>
<code><</code><code>img</code> <code>class</code><code>=</code><code>"lazy"</code> <code>data-original</code><code>=</code><code>"img/corvette_pitstop.jpg"</code><code>></code>
js出始化lazyload并設定圖檔顯示方式
<code><script type=</code><code>"text/javascript"</code> <code>charset=</code><code>"utf-8"</code><code>></code>
<code> </code><code>$(</code><code>function</code><code>() {</code>
<code> </code><code>$(</code><code>"img.lazy"</code><code>).lazyload({effect: </code><code>"fadeIn"</code><code>});</code>
<code> </code><code>});</code>
<code></script></code>
在圖檔中也可以不使用 class="lazy"，初始化時使用：
<code>$(</code><code>"img"</code><code>).lazyload({effect: </code><code>"fadeIn"</code><code>});</code>
這樣就可以對全局的圖檔都有效！
=======以下代碼由 聆锾沐雨 提供=========
如果想提載入圖檔，可以使用 threshold 進行設定，
<code>$(</code><code>"img.lazy"</code><code>).lazyload({ threshold :180});</code>
以上執行個體的含義是：在圖檔距離螢幕180px時提前載入：
========以下内容由 ?Ｄ丶мемοяy 提供===============
引入
路徑依據實際目錄來确定。
圖檔引用lazyload 方式
<code><</code><code>img</code> <code>class</code><code>=</code><code>"lazy"</code> <code>data-original</code><code>=</code><code>"img/bmw_m1_hood.jpg"</code> <code>/></code>
參數設定
7
8
9
10
11
12
13
14
<code>$(</code><code>"img.lazy"</code><code>).lazyload({</code>
<code> </code><code>placeholder : </code><code>"img/grey.gif"</code><code>, </code><code>//用圖檔提前占位</code>
<code> </code><code>// placeholder,值為某一圖檔路徑.此圖檔用來占據将要加載的圖檔的位置,待圖檔加載時,占位圖則會隐藏</code>
<code> </code><code>effect: </code><code>"fadeIn"</code><code>, </code><code>// 載入使用何種效果</code>
<code> </code><code>// effect(特效),值有show(直接顯示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn</code>
<code> </code><code>threshold: 200, </code><code>// 提前開始加載</code>
<code> </code><code>// threshold,值為數字,代表頁面高度.如設定為200,表示滾動條在離目标位置還有200的高度時就開始加載圖檔,可以做到不讓使用者察覺</code>
<code> </code><code>event: </code><code>'click'</code><code>, </code><code>// 事件觸發時才加載</code>
<code> </code><code>// event,值有click(點選),mouseover(滑鼠劃過),sporty(運動的),foobar(…).可以實作滑鼠莫過或點選圖檔才開始加載,後兩個值未測試…</code>
<code> </code><code>container: $(</code><code>"#container"</code><code>), </code><code>// 對某容器中的圖檔實作效果</code>
<code> </code><code>// container,值為某容器.lazyload預設在拉動浏覽器滾動條時生效,這個參數可以讓你在拉動某DIV的滾動條時依次加載其中的圖檔</code>
<code> </code><code>failurelimit : 10 </code><code>// 圖檔排序混亂時</code>
<code> </code><code>// failurelimit,值為數字.lazyload預設在找到第一張不在可見區域裡的圖檔時則不再繼續加載,但當HTML容器混亂的時候可能出現可見區域内圖檔并沒加載出來的情況,failurelimit意在加載N張可見區域外的圖檔,以避免出現這個問題.</code>
<code>});</code>
PREVIOUS:
NEXT:
jQuery溫度計
jQuery下拉框能擴充和美化插件Chosen