判断多个图片是否加载完成
来源:互联网 发布:launchpad是什么知乎 编辑:程序博客网 时间:2024/05/01 00:27
前几天做项目的时候遇到一个问题,一组图片,判断全部载入完成,今天优化了一下写成jQuery插件。
注:jQuery插件。。。(原创哦)
(function(){$.fn.imgLoad = function(options){var opts = $.extend({time:4000, ///等待载入时间,如果超过这个时间就直接执行回调callback:function(){} //默认回调}, options);var $this = this,i = 0, j = 0, len = this.length;$this.each(function(){var _this = this,dateSrc = $(_this).attr("date-src"),imgsrc = dateSrc?dateSrc:_this.src;var img = new Image();img.onload = function(){img.onload = null;_this.src = imgsrc;i++;};img.src = imgsrc;});var t = window.setInterval(function(){j++;$("#msg").html(i);if (i==len || j*200>=opts.time){window.clearInterval(t);opts.callback();};},200);}})(jQuery);
html结构
注:date-src 属性 是真实的图片地址 src放一个loading...的gif 图片 ,不带date-src 也是可以的!!!
<img date-src="http://dl.yzz.cn/public/images/100608/29_161214_3.jpg" src="http://www.mb5u.com/uploads/sucai/20088258937562778016.gif" /><img date-src="http://www.asianfinancialforum.com/aff2010/eng/photos/images/large/p8.jpg" src="http://www.mb5u.com/uploads/sucai/20088258937562778016.gif" /><img date-src="http://www.asianfinancialforum.com/aff2010/eng/photos/images/large/p13.jpg" src="http://www.mb5u.com/uploads/sucai/20088258937562778016.gif" />
调用
$(function(){$("img").imgLoad({time:10000000,//设置足够大 须等待图片载入完成,但是404的时候就杯具了...callback:function(){alert("载入完成")}});})
- 判断多个图片是否加载完成
- js判断图片是否加载完成
- js判断图片是否加载完成
- JavaScript怎么判断图片是否加载完成?
- js 判断图片是否加载完成
- 如何判断图片是否加载完成
- JS判断图片是否加载完成
- js判断图片是否加载完成
- 怎么 判断图片是否加载完成
- JQuery判断页面图片是否加载完成并延迟加载
- JQuery判断页面图片是否加载完成并延迟加载
- JQuery判断页面图片是否加载完成并延迟加载
- 用javascript 怎么判断图片是否加载完成
- js或者jquery判断图片是否加载完成
- js或者jquery判断图片是否加载完成
- 每天一个JavaScript实例-判断图片是否加载完成
- 使用complete属性判断图片是否加载完成
- avascript判断图片是否加载完成方法整理
- Hbase Master RIT(Region in Transaction)分析
- SoundCloud:下一个YouTube?
- 滚动条样式锦集
- TCP与UDP的区别
- 全国主要省会城市和地区手机离线地图数据文件下载地址
- 判断多个图片是否加载完成
- java写入excel表格模板
- ZeroMemory memset ={0}的区别和探究
- TeX系列: epstopdf宏包
- vlc嵌入QT程序<例>
- [转]Ubuntu 11.10编译安装nginx、PHP 5.3.8、mysql
- 在CentOS5上用 rvm 部署Rails3应用
- 我思故我在系列—数据结构面试题NO.17(题目搜集整理者JULY,非常感谢!!)
- 飞凌6410+linux2.6.28+PicoGL