IE中图片的onload事件无效问题和解决方法

在web开发在获取图片宽高是很正常的事情，图片在加载完成前是获取不到图片的宽高的，在加载完成后才可以获取图片本身的宽高，例如：


代码如下:

var img = new Image();
img.src = "loading.gif";
img.onload = function(){
 alert ( img.width );
};

OK?这段代码看着没什么问题，但在ie中会有一个bug，就是ie第一次打开的时候没问题，第二次使用这个方法就悲剧了，ie没反应了，即使刷新页面也是一样。因为IE会缓存图片，第2次加载的图片，不是从服务器上传过来的，而是从缓冲区里加载的。
先写onload方法，再指定这张图片的URL，这样就正常了。所以，不是IE没有触发onload事件，而是因为加载缓冲区的速度太快，以至于没有运行到img.onload的时候，onload事件已经触发了。这样就OK了。

代码如下:

var img = new Image();
img.onload = function(){
 alert ( img.width );
};
img.src = "loading.gif";

赞 (0)

相关推荐

  • IE浏览器中图片onload事件无效的解决方法

    故事模式实现是只加载当前浏览的照片和它下面的两张照片,加载照片的时候才会加载和渲染评论区,图片没有加载前会用一个一象素的图片占位,并用一个loading类将显示出一个loading背景图,判断在可视区的时候替换成真正的图片,图片加载成功后删除loading类. 问题出在最后面,测试的时候发现在IE下loading类无法删除,当时代码如下: 复制代码 代码如下: img.src = _src;img.src = _src;img.onload = function(){   _con.delCla

  • ie 处理 gif动画 的onload 事件的一个 bug

    如果 <img>标签的 src为一个 gif 动画,那么他的 onload事件会重复触发. firefox就没有这样的问题. <img src="http://zi.csdn.net/intel_120x60.gif" onload='gorush(this)'> <script type="text/javascript"> //by Go_Rush(阿舜) from http://ashun.cnblogs.com/ func

  • 仅IE9/10同时支持script元素的onload和onreadystatechange事件分析

    如下 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>IE9/10同时支持script元素的onload和onreadystatechange事件</title> <script src="http://code.jquery.com/jquery.min.js" onload="ale

  • IE中图片的onload事件无效问题和解决方法

    在web开发在获取图片宽高是很正常的事情,图片在加载完成前是获取不到图片的宽高的,在加载完成后才可以获取图片本身的宽高,例如: 复制代码 代码如下: var img = new Image();img.src = "loading.gif";img.onload = function(){ alert ( img.width );}; OK?这段代码看着没什么问题,但在ie中会有一个bug,就是ie第一次打开的时候没问题,第二次使用这个方法就悲剧了,ie没反应了,即使刷新页面也是一样.

  • 关于jquery中动态增加select,事件无效的快速解决方法

    近来做项目,用的jquery1.6.2库,当动态增加div 及select时,事件却不起作用. 查了一些资料,发现bind事件:向匹配元素附加一个或更多事件处理器.而live事件:为当前或未来的匹配元素添加一个或多个事件处理器. 其资料如下: [bind和live的区别] live方法其实是bind方法的变种,其基本功能就同bind方法的功能是一样的,都是为一个元素绑定某个事件,但是bind方法只能给当前存在的元素绑定事件,对于事后采用JS等方式新生成的元素无效,而live方法则正好弥补了bin

  • 仅img元素创建后不添加到文档中会执行onload事件的解决方法

    示例 复制代码 代码如下: <!DOCTYPE HTML> <HTML> <HEAD> <meta charset="utf-8" /> <title>仅img元素创建后却不添加到文档中会执行onload事件</title> </HEAD> <BODY> <script> var img = document.createElement('img'); img.src = &qu

  • vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法详解

    本文实例讲述了vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法.分享给大家供大家参考,具体如下: 在网上看了一下vue中监听滚动条滚动事件,清一色的使用document.addEventListener('scroll',function(){}) 我是在做滚动条滑到底部时,自动加载更多的时候有这个需求. 我认为使用document.addEventListener会破坏vue的统一性,对我这种有轻微代码强迫症的人来说,让我感觉很不爽.而且这种做法,会让你更加难以判断是否

  • Android中EditText 设置 imeOptions 无效问题的解决方法

    有时候我们需要在EditText  输出完之后 需要在键盘出现 右下角变成"Go"或"前往 搜索时:通常我们需要设置Android:imeOptions属性.Android:imeOptions的值有actionGo. actionSend .actionSearch.actionDone等 但是今天我发现设置了无效  那是因为我设置了 android:maxLines="1" 解决方法 就是去掉 android:maxLines="1"

  • js中class的点击事件没有效果的解决方法

    js中class的点击事件没有效果的解决方法

    如下所示: $(".xx").clcik(function(){····}); 本来不用js生成类,是有点击效果的一但js里写,就没有点击效果了,如下: 做如下修改即可,监听document 以上就是小编为大家带来的js中class的点击事件没有效果的解决方法全部内容了,希望大家多多支持我们~

  • 详解Android Libgdx中ScrollPane和Actor事件冲突问题的解决办法

    详解Android Libgdx中ScrollPane和Actor事件冲突问题的解决办法

    详解Android Libgdx中ScrollPane和Actor事件冲突问题的解决办法 在Libgdx的使用过程中,经常会用到ScrollPane这个widget,来实现滑动效果, 如下所示: 但是如果想在上面的效果上添加一点扩展,比如ScrollPane中的Actor可以从ScrollPane中移出来,并添加到Stage中,则需要添加额外的逻辑 具体代码参考如下: /** * Created by Danny.姜 on 17/7/26. */ public class TestAdapter

  • 解决C#中WebBrowser的DocumentCompleted事件不执行的实现方法

    解决C#中WebBrowser的DocumentCompleted事件不执行的实现方法 :使用WebBrowser的ProgressChanged事件,在时间中判断((WebBrowser)sender).ReadyState == WebBrowserReadyState.Complete是否成立,若成立则执行DocumentCompleted的处理. 复制代码 代码如下: void WebBrowser_ProgressChangedForSomething(object sender, W

  • 在django中图片上传的格式校验及大小方法

    如下所示: Uploadfiles = request.FILES.get('参数', '') for i in Uploadfiles : # 图片大小的属性 i.size suffix = os.path.splitext(i.name)[1] if not suffix: return False elif suffix.lower() == '.jpeg' or suffix.lower() == ".png" or suffix.lower() == ".jpg&q

  • C++中图片类型的识别与转换详解方法

    C++中图片类型的识别与转换详解方法

    目录 1.图片类型的识别 1.1.bmp图片 1.2.jpg图片 1.3.jpg图片 1.4.gif图片 1.5.tiff图片 1.6.使用CreateFile和ReadFile API函数读取内容 2.图片之间的相互转换 1.图片类型的识别 一般情况下,不同类型的图片文件都会有其对应的后缀名,比如.jpg..bmp..jpg等.但仅仅通过后缀名,是没法判别文件是不是图片以及图片文件真实类型,必须通过文件内容的起始标记字段才能判断出来. 每种图片文件的类型标识字段存储于文件内容开始的几个字节,读

随机推荐