標籤:捲軸 contain padding cell 表示 滑鼠 設定圖 html 目標
使用方法
引用jquery和jquery.lazyload.js到你的頁面
12 |
< script src = "jquery-1.11.0.min.js" ></ script > < script src = "jquery.lazyload.js?v=1.9.1" ></ script > |
html圖片調用方法
為圖片加入樣式lazy 圖片路徑引用方法用data-original
123456 |
< img class = "lazy" data-original = "img/bmw_m1_hood.jpg" > < img class = "lazy" data-original = "img/bmw_m1_side.jpg" > < img class = "lazy" data-original = "img/viper_1.jpg" > < img class = "lazy" data-original = "img/viper_corner.jpg" > < img class = "lazy" data-original = "img/bmw_m3_gt.jpg" > < img class = "lazy" data-original = "img/corvette_pitstop.jpg" > |
js初始化lazyload並設定圖片顯示方式
12345 |
<script type= "text/javascript" charset= "utf-8" > $( function () { $( "img.lazy" ).lazyload({effect: "fadeIn" }); }); </script> |
在圖片中也可以不使用 class="lazy",初始化時使用:
1 |
$( "img" ).lazyload({effect: "fadeIn" }); |
這樣就可以對全域的圖片都有效!
如果想提前載入圖片,可以使用 threshold 進行設定,
1 |
$( "img.lazy" ).lazyload({ threshold :180}); |
以上執行個體的含義是:在圖片距離螢幕180px時提前載入:
引入
12 |
< script src = "jquery-1.11.0.min.js" ></ script > < script src = "jquery.lazyload.js?v=1.9.1" ></ script > |
路徑依據實際目錄來確定。
12345 |
<script type= "text/javascript" charset= "utf-8" > $( function () { $( "img.lazy" ).lazyload({effect: "fadeIn" }); }); </script> |
圖片引用lazyload 方式
1 |
< img class = "lazy" data-original = "img/bmw_m1_hood.jpg" /> |
參數設定
1234567891011121314 |
$( "img.lazy" ).lazyload({ placeholder : "img/grey.gif" , //用圖片提前佔位 // placeholder,值為某一圖片路徑.此圖片用來佔據將要載入的圖片的位置,待圖片載入時,佔位圖則會隱藏 effect: "fadeIn" , // 載入使用何種效果 // effect(特效),值有show(直接顯示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn threshold: 200, // 提前開始載入 // threshold,值為數字,代表頁面高度.如設定為200,表示捲軸在離目標位置還有200的高度時就開始載入圖片,可以做到不讓使用者察覺 event: ‘click‘ , // 事件觸發時才載入 // event,值有click(點擊),mouseover(滑鼠划過),sporty(運動的),foobar(…).可以實現滑鼠莫過或點擊圖片才開始載入,後兩個值未測試… container: $( "#container" ), // 對某容器中的圖片實現效果 // container,值為某容器.lazyload預設在拉動瀏覽器捲軸時生效,這個參數可以讓你在拉動某DIV的捲軸時依次載入其中的圖片 failurelimit : 10 // 圖片排序混亂時 // failurelimit,值為數字.lazyload預設在找到第一張不在可見地區裡的圖片時則不再繼續載入,但當HTML容器混亂的時候可能出現可見地區內圖片並沒載入出來的情況,failurelimit意在載入N張可見地區外的圖片,以避免出現這個問題. }); |
jQuery圖片消極式載入外掛程式jQuery.lazyload 的使用