有很多項目經常會需要判斷圖片加載完成後執行相應的操作,或者需要圖片延遲加載,網上雖然已經有很不錯的插件,但要為這些效果還得單獨加載一個插件的話總感覺有點不舒服,干脆自己寫了個方法:
代碼如下 function loadimg(arr,funLoading,funOnLoad,funOnError){
var numLoaded=0,
numError=0,
isObject=Object.prototype.toString.call(arr)==="[object Object]" ? true : false;
var arr=isObject ? arr.get() : arr;
for(a in arr){
var src=isObject ? $(arr[a]).attr("data-src") : arr[a];
preload(src,arr[a]);
}
function preload(src,obj){
var img=new Image();
img.onload=function(){
numLoaded++;
funLoading && funLoading(numLoaded,arr.length,src,obj);
funOnLoad && numLoaded==arr.length && funOnLoad(numError);
};
img.onerror=function(){
numLoaded++;
numError++;
funOnError && funOnError(numLoaded,arr.length,src,obj);
}
img.src=src;
}
}
參數說明:
arr:可以是存放圖片路徑的一個數組,也可以是選取到的img的jquery對象;
funLoading:每一個單獨的圖片加載完成後執行的操作;
funOnLoad:全部圖片都加載完成後的操作;
funOnError:單個圖片加載出錯時的操作。
如:
代碼如下 var imgonload=function(errors){調用示例:
代碼如下console.log("loading...");
loadimg($("img"),funloading_obj,imgonload,funOnError);
/*loadimg(["http://pic22.nipic.com/20120619/9607634_212642465144_2.jpg",
"/20120531/1670912_103610084349_2.jpg",
"/20120616/4952071_130629530136_2.jpg",
"/20120610/1723580_105037029000_2.jpg",
"http://pic22.nipic.com/20120617/2572038_125013326121_2.jpg"
],funloading,imgonload,funOnError);*/
上面算是原生態寫法了,下面我們介紹一個基於Lazy Load, 延遲加載圖片的 jQuery 插件
Lazy Load 依賴於 jQuery. 請將下列代碼加入頁面 head 區域:
代碼如下 <script src="jquery.js" type="text/javascript"></script>你必須修改 HTML 代碼. 在 src 屬性中設置展位符圖片, demo 頁面使用 1x1 像素灰色 GIF 圖片. 並且需要將真實圖片的 URL 設置到 data-original 屬性. 這裡可以定義特定的 class 以獲得需要延遲加載的圖片對象. 通過這種方法你可以簡單地控制插件綁定.
代碼如下 <img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">處理圖片的代碼如下.
代碼如下 $("img.lazy").lazyload();這將使所有 class 為 lazy 的圖片將被延遲加載. 可以參考基本選項 demo
設置敏感度
幾乎所有浏覽器的 JavaScript 都是激活的. 然而可能你仍希望能在不支持 JavaScript 的客戶端展示真實圖片. 當浏覽器不支持 JavaScript 時優雅降級, 你可以將真實的圖片片段在寫 <noscript> 標簽內.
可以通過 CSS 隱藏占位符.
代碼如下 .lazy {在支持 JavaScript 的浏覽器中, 你必須在 DOM ready 時將占位符顯示出來, 這可以在插件初始化的同時完成.
代碼如下 $("img.lazy").show().lazyload();這些都是可選的, 但如果你希望插件平穩降級這些都是應該做的.
設置敏感度
默認情況下圖片會出現在屏幕時加載. 如果你想提前加載圖片, 可以設置 threshold 選項, 設置 threshold 為 200 令圖片在距離屏幕 200 像素時提前加載.
占位圖片
你還可以設定一個占位圖片並定義事件來觸發加載動作. 這時需要為占位圖片設定一個 URL 地址. 透明, 灰色和白色的 1x1 象素的圖片已經包含在插件裡面.
事件觸發加載
事件可以是任何 jQuery 時間, 如: click 和 mouseover. 你還可以使用自定義的事件, 如: sporty 和 foobar. 默認情況下處於等待狀態, 直到用戶滾動到窗口上圖片所在位置. 在灰色占位圖片被點擊之前阻止加載圖片, 你可以這樣做: