最近在做wBox
开发中,需要做一个图片的幻灯片效果,为了方便加载速度,我使用了new Iamge
的对象方法来预加载图片
,当图片onLoad就运行一个函数来计算图片的大小尺寸,进行jQuery动画
,以及切换图片src,在firefox
下开发完成后,可是到了IE下进行调试总是不会触发onload
事件,不管是IE8、IE7还是万恶的IE6,都不会触发onload事件,我很迷惑,后来在google上找到了解决
的方法:一下为引用部分
最初的代码如下:
var img = new Image;
img.src = "test.gif";
img.onload = function(){
alert ( img.width );
};
这段代码看着没什么问题,但是为什么onload没有被IE调用呢?因为IE会缓存图片,第2次加载的图片,不是从服务器上传过来的,而是从缓冲区里加载的。是不是从缓冲区里加载的图片就不触发onload事件呢?我于是我测试了以下代码,成功了~
var img = new Image;
img.onload = function(){
alert ( img.width );
};
img.src = "test.gif";
我把onload写到前面去,先告诉浏览器如何处理这张图片,再指定这张图片的源,这样就正常了。所以,不是IE没有触发onload事件,而是因为加载缓冲区的速度太快,以至于没有运行到img.onload的时候,onload事件已经触发了。这让我想到了Ajax
,我们在写xmlhttp的时候,都是先指定onstatechange的回调函数,然后再send数据的,道理是一样的。
分享到:
相关推荐
关于 Image 对象 onload 事件。 想获取的是 image 的 宽高值。所以用 onload 方法。另外是获取的远程图片。 但IE在第二次显示图片的时候,总是不走 onload 方法。代码: var img = new Image(); img.src = ...
脱离document.onload和window.onload的onload事件,可多次添加加载事件!
有需要的朋友是最好的参考资料。希望有所帮助!
我们知道,在javascript中用来执行页面加载中的操作时候,我们会使用windows.onload=function(){}或者windows.onload=函数名(),也可以在body中调用onload事件调用方法即可,在jQuery中也有相当的代码
window.onload insertAfter()
image-size使用该插件,可以在图片onload之前获取图片的大小,在瀑布流布局中,应该可能会有用处。###实现原理:使用轮询,在图片onload之前,获取到图片大小。如果图片已经被缓存过,直接返回相关信息。回调参数...
NULL 博文链接:https://snandy.iteye.com/blog/666530
– function addImg(isrc) { var Img = new Image(); Img.src = isrc; Img.onload = function () { document.body.appendChild(Img); } } //–> [removed] 当包含上述代码的页面打开时并不载入 “tt.jpg” ,当点击...
这段代码看着没什么问题,但在ie中会有一个bug,就是ie第一次打开的时候没问题,第二次使用这个方法就悲剧了,ie没反应了,即使刷新页面也是一样。因为IE会缓存图片,第2次加载的图片,不是从服务器上传过来的,而是...
故事模式实现是只加载当前浏览的照片和它下面的两张照片,加载照片的时候才会加载和渲染评论区,图片没有加载前会用一个一象素的图片占位...}网上找了一番,onload和定义src的语句应该换一下顺序,IE从缓存中取图片,o
本文实例讲述了IE8中动态创建script标签onload无效的解决方法。分享给大家供大家参考。具体分析如下: 今天做项目,发现一个奇怪的问题,动态创建的script标签在IE8下无法触发onload事件。 代码如下: 代码如下:var...
<!... <TITLE> New Document ... var image=new Image();... image.src=ImgD.src;... if(image.width > maxW... <IMG id=uploadimage height=0 width=0 src="" onload="javascript:DrawImage(this);" > </HTML>
仅img元素创建后不添加到文档中会执行onload事件的解决方法,需要的朋友可以参考下。
判断iframe是否加载完成的完美方法IE 支持 iframe 的 onload 事件,不过是隐形的,需要通过 attachEvent 来注册。 第二种方法比第一种方法更完美(采用readystatechange判断),因为 readystatechange 事件相对于 load...
3.拿到Image对象的高宽,按比例计算出想要的高宽(使用image.onload解决各浏览器不兼容拿不到Image对象高宽的问题) 4.按照计算好之后高宽将图片在canvas上绘制出来 5.通过canvas的toDataURL拿到一个转换后的base...
var img = new Image(); img.src = url; if (img.complete) { callback(img.width, img.height); } else { img.onload = function () { callback(img.width, img.height); img.onload = null; }; }; }; 引...
JS 读取Excel文件(xls) 兼容Chrome/IE/Firefox 文章配套工具