jQuery簡(jiǎn)單實(shí)現(xiàn)圖片預(yù)加載
jQuery實(shí)現(xiàn)圖片預(yù)加載
JS代碼
$(function(){ loadImg("http://d.hiphotos.baidu.com/image/pic/item/fd039245d688d43f14f69eff7f1ed21b0ef43b5b.jpg",addImg); function loadImg(url,callback){ var img = new Image(); img.onload = function(){ img.onload = null; callback(img); } img.src=url; img.width ="202"; img.height = "202"; img.attr("defaulturl","../images/img.png"); if(){} } function addImg(img){ $(img).appendTo($(".imgload li")) } })
HTML:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圖片預(yù)加載</title> <link rel="stylesheet" type="text/css" href="css/index.css"> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="js/index.js"></script> </head> <body> <div class="imgload"> <ul> <li class="fl"></li> <li class="fl"></li> <li class="fl"></li> <li class="fl"></li> <li class="fl"></li> <li class="fl"></li> <li class="fl"></li> <li class="fl"></li> <li class="fl"></li> </ul> </div> </body> </html>
其他實(shí)例
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; } }
參數(shù)說(shuō)明:
arr:可以是存放圖片路徑的一個(gè)數(shù)組,也可以是選取到的img的jquery對(duì)象;
funLoading:每一個(gè)單獨(dú)的圖片加載完成后執(zhí)行的操作;
funOnLoad:全部圖片都加載完成后的操作;
funOnError:?jiǎn)蝹€(gè)圖片加載出錯(cuò)時(shí)的操作。
懶加載,
var imgonload=function(errors){ /*errors:加載出錯(cuò)的圖片數(shù)量;*/ console.log("loaded,"+errors+" images loaded error!"); } var funloading=function(n,total,src,obj){ /* n:已加載完成的數(shù)量; total:總共需加載的圖片數(shù)量; src:當(dāng)前加載完成的圖片路徑; obj:當(dāng)loadimg函數(shù)中傳入的arr為存放圖片路徑的數(shù)組時(shí),obj=src,是圖片路徑, 當(dāng)arr為jquery對(duì)象時(shí),obj是當(dāng)前加載完成的img dom對(duì)象。 */ console.log(n+"of"+total+" pic loaded.",src); var newimg = document.createElement("img"); newimg.src=src; $("body").append(newimg).fadeIn(); } var funloading_obj=function(n,total,src,obj){ console.log(n+"of"+total+" pic loaded.",src); $(obj).attr("src",src); $(obj).fadeIn(200); } var funOnError=function(n,total,src,obj){ console.log("the "+n+"st img loaded Error!"); }
調(diào)試用例
console.log("loading..."); loadimg($("img"),funloading_obj,imgonload,funOnError); /*loadimg(["http://pic22.nipic.com/20120619/9607634_212642465144_2.jpg", "http://pic21.nipic.com/20120531/1670912_103610084349_2.jpg", "http://pic21.nipic.com/20120616/4952071_130629530136_2.jpg", "http://pic21.nipic.com/20120610/1723580_105037029000_2.jpg", "http://pic22.nipic.com/20120617/2572038_125013326121_2.jpg" ],funloading,imgonload,funOnError);*/
以上所述就是本文的全部?jī)?nèi)容了,希望大家能夠喜歡。
- 利用CSS、JavaScript及Ajax實(shí)現(xiàn)圖片預(yù)加載的方法
- 利用CSS、JavaScript及Ajax實(shí)現(xiàn)高效的圖片預(yù)加載
- 多種js圖片預(yù)加載實(shí)現(xiàn)方式分享
- jquery實(shí)現(xiàn)圖片預(yù)加載
- Jquery實(shí)現(xiàn)圖片預(yù)加載與延時(shí)加載的方法
- 實(shí)現(xiàn)圖片預(yù)加載的三大方法及優(yōu)缺點(diǎn)分析
- js圖片預(yù)加載示例
- JS實(shí)現(xiàn)圖片預(yù)加載無(wú)需等待
- jQuery圖片預(yù)加載 等比縮放實(shí)現(xiàn)代碼
- js 實(shí)現(xiàn)圖片預(yù)加載(js操作 Image對(duì)象屬性complete ,事件onload 異步加載圖片)
- jquery 圖片預(yù)加載 自動(dòng)等比例縮放插件
- 利用CSS、JavaScript及Ajax實(shí)現(xiàn)圖片預(yù)加載的三大方法
相關(guān)文章
jQuery選擇器源碼解讀(六):Sizzle選擇器匹配邏輯分析
這篇文章主要介紹了jQuery選擇器源碼解讀(六):Sizzle選擇器匹配邏輯分析,,需要的朋友可以參考下2015-03-03使用jQuery或者原生js實(shí)現(xiàn)鼠標(biāo)滾動(dòng)加載頁(yè)面新數(shù)據(jù)
這篇文章主要介紹了使用jQuery或者原生js實(shí)現(xiàn)鼠標(biāo)滾動(dòng)加載頁(yè)面新數(shù)據(jù)的方法,即控制滾動(dòng)條下拉時(shí)的加載事件,需要的朋友可以參考下2016-03-03Jquery實(shí)現(xiàn)移動(dòng)端控制DIV拖拽
這篇文章主要為大家詳細(xì)介紹了Jquery實(shí)現(xiàn)移動(dòng)端控制DIV拖拽,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02jQuery 樹(shù)形結(jié)構(gòu)的選擇器
樹(shù)形結(jié)構(gòu)里的節(jié)點(diǎn),如果它不是根部,也不是末枝,那么它一定有父母和孩子。2010-02-02