`
haolianshuai
  • 浏览: 23220 次
社区版块
存档分类
最新评论

IE下面Image.onload不调用原因

    博客分类:
  • js
阅读更多
function AutoResizeImage(maxWidth,maxHeight,objImg){
			var img = new Image();
			//img.src = objImg.src;//如果放在onload前面则IE会先去读取图片缓存
			img.onload=function(){
				var hRatio;
				var wRatio;
				var Ratio = 1;
				var w = img.width;
				var h = img.height;
				wRatio = maxWidth / w;
				hRatio = maxHeight / h;
				if (maxWidth ==0 && maxHeight==0){
				Ratio = 1;
				}else if (maxWidth==0){//
				if (hRatio<1) Ratio = hRatio;
				}else if (maxHeight==0){
				if (wRatio<1) Ratio = wRatio;
				}else if (wRatio<1 || hRatio<1){
				Ratio = (wRatio<=hRatio?wRatio:hRatio);
				}
				if (Ratio<1){
				w = w * Ratio;
				h = h * Ratio;
				}
				objImg.height = h;
				objImg.width = w;
				objImg.style.marginLeft = (nextWidth-objImg.width)/2+'px';
				//objImg.style.marginTop = (nextHeight-objImg.height)/2+'px';
			}
			img.src = objImg.src;//放置在onload方法声明之后
		}

我把onload写到前面去,先告诉浏览器如何处理这张图片,再指定这张图片的源,这样就正常了。所以,不是IE没有触发onload事件,而是因为加载缓冲区的速度太快,以至于没有运行到img.onload的时候,onload事件已经触发了。这让我想到了Ajax,我们在写xmlhttp的时候,都是先指定onstatechange的回调函数,然后再send数据的,道理是一样的。由此也总结出了个规律,IE下面从缓存里加载出啦的图片是不执行onload事件的
分享到:
评论

相关推荐

    JavaScript与Image加载事件(onload)、加载状态(complete)

    4. 对于IE浏览器,考虑使用`readyState`属性来判断图片加载状态,特别是当`complete`属性不可靠时。 总之,理解和掌握JavaScript中的Image对象加载事件和加载状态是优化图片加载和处理的关键,这对于创建高性能、...

    ie6图片png完美支持iepngfix

    2. **调用修复方法**:在页面加载完成后,调用iepngfix方法来处理需要透明效果的PNG图片。通常,这会在`window.onload`事件中进行。 ```javascript window.onload = function() { IEPNGFix.init(); } ``` 3. **...

    ie6 png 透明度 解决方法

    PNG是一种优秀的图像格式,尤其适用于需要半透明效果的设计,但IE6只支持8位的PNG图像,而不支持带有alpha通道的24位PNG图像,导致了透明或半透明部分显示为黑色或不透明。这个问题让许多设计师和开发者头痛不已。...

    实现ie6的png图片透明的2种方法

    &lt;script type="text/javascript" src="image/ie_png.js"&gt; ie_png.fix('.png,.menu ul li span'); // 修复具有.png类的元素以及.menu ul li span ie_png.fix('.png,.logo span'); // 修复.logo span中的PNG图片 &lt;!...

    通过调用 JS 打印图片信息

    本文将深入探讨如何利用 JavaScript 实现这一功能,特别是在解决谷歌浏览器首次打印时图片不显示及去除IE浏览器页眉页脚的问题。 首先,我们需要理解为什么在某些情况下,如谷歌浏览器,图片在第一次打印时不显示。...

    解决ie6下png格式的兼容

    在互联网早期,IE6(Internet Explorer 6)作为主流浏览器占据了一席之地,但其对PNG格式图片的支持并不完善,导致网页设计者面临许多挑战。PNG格式,特别是PNG-24,提供了透明度和丰富的颜色支持,但在IE6中却无法...

    图片等比例缩放个人最优化版(IE6,IE7,FF)

    在优化方面,我们可以预先为图片设置最大宽度和高度,这样在调用`ImgAuto`函数时,就不需要再动态计算这些值,提高了效率。例如: ```html &lt;img src="http://bbs.tnbz....

    JS实现图片预加载

    但是,在测试时发现,IE 和 Opera 浏览器中 onload 事件不会被触发,因为浏览器已经缓存了图片,导致 onload 事件不会被触发。为了解决这个问题,可以使用 Image 对象的 complete 属性来判断图片是否已经载入成功。 ...

    png在IE6下透明背景解决办法(两种方法,经验总结)

    然而,PNG图像在Internet Explorer 6 (IE6) 上的透明效果处理存在问题,表现为半透明(Alpha通道)区域变为黑色或者显示不正确。这个问题在更现代的浏览器中已经得到解决,但对于那些仍需兼容IE6的开发者来说,仍然...

    JavaScript实现加载不同尺寸图片自适应统一尺寸容器,且图片不变形

    例如,对于不支持`naturalWidth`和`naturalHeight`属性的老版IE,可以使用`img.onload`事件来获取原始尺寸。 ```javascript function getOriginalSize(img) { var width, height; if (img.naturalWidth) { width...

    IEpng透明通用代码

    在互联网的早期,Internet Explorer(简称IE)6是主流浏览器之一,但它存在许多与现代Web标准不兼容的问题,其中就包括PNG(Portable Network Graphics)图像的透明性问题。PNG格式支持半透明效果,但在IE6中,这种...

    好用的JS图片裁剪工具——jquery.Jcrop-0.9.8

    newImage.onload = function() { $('#target').attr('src', this.src).Jcrop(); }; ``` ### 7. **自定义外观与交互** 通过修改CSS样式,可以调整Jcrop的外观,如边框、提示文字等。同时,Jcrop的拖动、缩放等交互...

    多种js图片预加载实现方式分享

    对于IE6及更低版本的问题,如果图片已在内存中,则不会再次触发`img.onload`事件,但这个问题在现代浏览器中已不存在。 3. AJAX实现预加载 AJAX请求不仅限于获取文本数据,也可以用于预加载图片。尽管使用`new ...

    关于图片的预加载过程中隐藏未知的

    在上述修复后的代码中,即使`onload`事件多次触发,也不会再次调用`callback`,因为`onload`已经被设为`null`。 然后,我们需要考虑图片是否已存在于浏览器缓存中。一些开发者会检查`img.complete`属性来决定是否...

    js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)

    这是因为IE和Opera可能将图片缓存起来,导致onload事件在第一次加载时触发后,后续的加载不会再次触发onload事件。为了解决这个问题,可能需要清除缓存或者更换图片资源的URL。 此外,我们还可以通过检测Image对象...

    如何实现网页图片png的透明

    然而,IE6(Internet Explorer 6)浏览器对PNG透明的支持并不完善,这为开发者带来了不少困扰。本文将详细介绍如何在网页中实现PNG图片的透明,并着重解决IE6的兼容性问题。 首先,我们需要了解PNG图片的透明原理。...

    javascript结合fileReader 实现上传图片.docx

    - 对于不支持`FileReader`的旧版IE浏览器,使用`DXImageTransform.Microsoft.AlphaImageLoader`实现图片预览。 #### 五、总结 通过上述代码,我们可以实现一个基本的图片上传预览功能。需要注意的是,在实际项目...

    html转pdf(亲测可用)

    同时,对于IE浏览器,可能需要额外的polyfill或替代方案,如`canvg`,来处理Canvas的不兼容问题。 5. 错误处理:在实际应用中,应包含错误处理代码,以应对可能出现的网络、权限或兼容性问题。 6. 性能优化:由于...

Global site tag (gtag.js) - Google Analytics