足球游戏_中国足彩网¥体育资讯$

jquery简单实现图片预加载
来源:易贤网 阅读:964 次 日期:2016-06-27 09:29:36
温馨提示:易贤网小编为您整理了“jquery简单实现图片预加载”,方便广大网友查阅!

jquery实现图片预加载

js代码

$(function(){ loadimg(); 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){ /*errors:加载出错的图片数量;*/ console.log(loaded,+errors+ images loaded error!); } var funloading=function(n,total,src,obj){ /* n:已加载完成的数量; total:总共需加载的图片数量; src:当前加载完成的图片路径; obj:当loadimg函数中传入的arr为存放图片路径的数组时,obj=src,是图片路径, 当arr为jquery对象时,obj是当前加载完成的img dom对象。 */ 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); /*loadimg([, , , , ],funloading,imgonload,funonerror);*/

中国足彩网信息请查看网页制作
易贤网手机网站地址:jquery简单实现图片预加载
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!

2025国考·省考课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 足球游戏_中国足彩网¥体育资讯$ 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65099533/13759567129 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:易贤网
云南网警报警专用图标