图片load事件和缓存

If the src is already set, then the event is firing in the cached case, before you even get the event handler bound. To fix this, you can loop through checking and triggering the event based off .complete, like this:

$("img").one("load", function() {
  // do stuff
}).each(function() {
  if(this.complete) $(this).load();
});

Note the change from .bind() to .one() so the event handler doesn‘t run twice.

==================================================================

如果图片在缓存中,它的load事件早在你绑定之前就已经被触发了。

为了避免这种情况,你可以对每一张图片检测.complete属性,然后主动触发load事件。

注意这里用的是.one()而不是.bind()或者.on(),这样load事件不会被触发两次。

时间: 2024-08-29 08:20:59

图片load事件和缓存的相关文章

drawImage方法与img的load事件、缓存问题

我们用到canvas的drawImage方法是往往要等图片加载完了执行 $('img').load(function(){ cont_2d.drawImage(img,0,0); }); 然而这种写法会出现问题:页面刷新有事会不显示图片: 这是图片缓存引起的$('img')的load事件没有触发, $('img').one('load' , function(){//单次绑定load事件 cont_2d.drawImage(img,0,0); }).each(function(){ if(thi

PHP判断图片是否存在和jquery中load事件对图片的处理

在公司的图片服务器中,同一个产品一般会存在对应的大图和缩略图.因此,我们在开发手机端的web网站时,默认使用的是产品图片的缩略图,查询数据库时获取的是缩略图的路径.但是,不知什么原因,时不时的,测试的同事总会找到我们,说产品图片没显示出来,是个bug,需要修改. 那么,问题来了. (1)PHP后台如何判断远程服务器上的图片是否存在 解决思路:获取图片路径-->对图片是否存在进行判断-->不存在,使用大图 /** * @desc 检查远程图片是否存在 * @param string $url 图

文件load事件:img、iframe

iframe的 load 事件 在所有为IFRAME动态添加onload监听事件的方法中,只有 使用事件监听方式为 IFRAME 的 onload 事件绑定处理函数,IE6.7.8才有效.所以为 IFRAME 添加load事件完美方案如下: // 事件监听兼容方案 function addEvent(elem,event,fn){ if (elem.attachEvent) { elem.attachEvent('on'+event,fn) } else { elem.addEventListe

SDWebImage使用,图片加载和缓存

SDWebImage使用,图片加载和缓存 2012-12-14 12:28:12|  分类: iOS|举报|字号 订阅 下载LOFTER我的照片书  | 清除缓存: [[SDImageCache sharedImageCache] clearDisk]; [[SDImageCache sharedImageCache] clearMemory]; 来自:http://blog.csdn.net/sqc3375177/article/details/7714573 SDWebImage托管在git

SDWebImage 图片加载和缓存

SDWebImage托管在github上.https://github.com/rs/SDWebImage 这个类库提供一个UIImageView类别以支持加载来自网络的远程图片.具有缓存管理.异步下载.同一个URL下载次数控制和优化等特征.使用示范的代码: UITableView使用UIImageView+WebCache类(基本应用,UIImageView的一个category) 前提#import导入UIImageView+WebCache.h文件,然后在tableview的cellFor

jQuery的ready与js的load事件的区别

摘自:http://www.cnblogs.com/see7di/archive/2011/07/15/2239677.html 为了理解这两个事件的异同,读者应该先了解HTML文档加载的顺序. DOM文档加载是按顺序执行的,这与浏览器的渲染方式有关系.一般浏览器渲染操作的顺序大致按如下几个步骤来完成.(1) 解析HTML结构.(2) 加载外部脚本和样式表文件.(3) 解析并执行脚本代码.(4) 构造HTML DOM模型.(5) 加载图片等外部文件.(6) 页面加载完毕. 具体说明如下.1. 执

jQuery中ready与load事件的区别

目录: 1ready与load谁先执行 2DOM文档加载的步骤 3ready事件 4load事件 5总结 概述: 大家在工作中用jQuery的时候一定会在使用之前这样: 1 2 3 4 5 6 7 8 //document ready $(document).ready(function(){     ...code... }) //document ready 简写 $(function(){     ...code... }) 有些时候也会这么写: 1 2 3 4 //document lo

winform中Load事件和shown事件以及自动登陆的实现

winform中load事件是窗体加载的时候执行的时间.在执行的时候,窗体还没显示出来.而Shown事件窗体已经显示出来,控件加载完成,需要注意的是:如果控件设置了背景图片,那么控件的背景颜色是不显示的.如果做自动登陆,需要窗体显示完成显示几秒.可以用Timer控件.而不是在shown中暂停线程. #region 窗体加载时如果记住密码,加载密码.用户名:如果自动登录,窗体加载成功后,2s执行自动登录 /// <summary> /// 窗体加载时如果记住密码,加载密码.用户名:如果自动登录,

js文件最后加载(在window.load事件发生后再加载js文件),用于解决因jQuery等js库导致网页加载慢的问题

需引入文件:lazyload-min.js <script src="JS/lazyload-min.js" type="text/javascript"></script> 插入代码: function loadscript() { LazyLoad.loadOnce([ 'JS/touch.js', 'http://libs.baidu.com/jquery/1.2.3/jquery.min.js' ], loadComplete); }