jQuery简单实现图片预加载

时间：2021-05-26

jQuery实现图片预加载

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>图片预加载</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>

其他实例

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("loaded,"+errors+" images loaded error!"); } var funloading=function(n,total,src,obj){ 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!"); }

调试用例

console.log("loading..."); loadimg($("img"),funloading_obj,imgonload,funOnError);

以上所述就是本文的全部内容了，希望大家能够喜欢。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章