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事件的
分享到:
相关推荐
4. 对于IE浏览器,考虑使用`readyState`属性来判断图片加载状态,特别是当`complete`属性不可靠时。 总之,理解和掌握JavaScript中的Image对象加载事件和加载状态是优化图片加载和处理的关键,这对于创建高性能、...
2. **调用修复方法**:在页面加载完成后,调用iepngfix方法来处理需要透明效果的PNG图片。通常,这会在`window.onload`事件中进行。 ```javascript window.onload = function() { IEPNGFix.init(); } ``` 3. **...
PNG是一种优秀的图像格式,尤其适用于需要半透明效果的设计,但IE6只支持8位的PNG图像,而不支持带有alpha通道的24位PNG图像,导致了透明或半透明部分显示为黑色或不透明。这个问题让许多设计师和开发者头痛不已。...
<script type="text/javascript" src="image/ie_png.js"> ie_png.fix('.png,.menu ul li span'); // 修复具有.png类的元素以及.menu ul li span ie_png.fix('.png,.logo span'); // 修复.logo span中的PNG图片 <!...
本文将深入探讨如何利用 JavaScript 实现这一功能,特别是在解决谷歌浏览器首次打印时图片不显示及去除IE浏览器页眉页脚的问题。 首先,我们需要理解为什么在某些情况下,如谷歌浏览器,图片在第一次打印时不显示。...
在互联网早期,IE6(Internet Explorer 6)作为主流浏览器占据了一席之地,但其对PNG格式图片的支持并不完善,导致网页设计者面临许多挑战。PNG格式,特别是PNG-24,提供了透明度和丰富的颜色支持,但在IE6中却无法...
在优化方面,我们可以预先为图片设置最大宽度和高度,这样在调用`ImgAuto`函数时,就不需要再动态计算这些值,提高了效率。例如: ```html <img src="http://bbs.tnbz....
但是,在测试时发现,IE 和 Opera 浏览器中 onload 事件不会被触发,因为浏览器已经缓存了图片,导致 onload 事件不会被触发。为了解决这个问题,可以使用 Image 对象的 complete 属性来判断图片是否已经载入成功。 ...
然而,PNG图像在Internet Explorer 6 (IE6) 上的透明效果处理存在问题,表现为半透明(Alpha通道)区域变为黑色或者显示不正确。这个问题在更现代的浏览器中已经得到解决,但对于那些仍需兼容IE6的开发者来说,仍然...
例如,对于不支持`naturalWidth`和`naturalHeight`属性的老版IE,可以使用`img.onload`事件来获取原始尺寸。 ```javascript function getOriginalSize(img) { var width, height; if (img.naturalWidth) { width...
在互联网的早期,Internet Explorer(简称IE)6是主流浏览器之一,但它存在许多与现代Web标准不兼容的问题,其中就包括PNG(Portable Network Graphics)图像的透明性问题。PNG格式支持半透明效果,但在IE6中,这种...
newImage.onload = function() { $('#target').attr('src', this.src).Jcrop(); }; ``` ### 7. **自定义外观与交互** 通过修改CSS样式,可以调整Jcrop的外观,如边框、提示文字等。同时,Jcrop的拖动、缩放等交互...
对于IE6及更低版本的问题,如果图片已在内存中,则不会再次触发`img.onload`事件,但这个问题在现代浏览器中已不存在。 3. AJAX实现预加载 AJAX请求不仅限于获取文本数据,也可以用于预加载图片。尽管使用`new ...
在上述修复后的代码中,即使`onload`事件多次触发,也不会再次调用`callback`,因为`onload`已经被设为`null`。 然后,我们需要考虑图片是否已存在于浏览器缓存中。一些开发者会检查`img.complete`属性来决定是否...
这是因为IE和Opera可能将图片缓存起来,导致onload事件在第一次加载时触发后,后续的加载不会再次触发onload事件。为了解决这个问题,可能需要清除缓存或者更换图片资源的URL。 此外,我们还可以通过检测Image对象...
然而,IE6(Internet Explorer 6)浏览器对PNG透明的支持并不完善,这为开发者带来了不少困扰。本文将详细介绍如何在网页中实现PNG图片的透明,并着重解决IE6的兼容性问题。 首先,我们需要了解PNG图片的透明原理。...
- 对于不支持`FileReader`的旧版IE浏览器,使用`DXImageTransform.Microsoft.AlphaImageLoader`实现图片预览。 #### 五、总结 通过上述代码,我们可以实现一个基本的图片上传预览功能。需要注意的是,在实际项目...
同时,对于IE浏览器,可能需要额外的polyfill或替代方案,如`canvg`,来处理Canvas的不兼容问题。 5. 错误处理:在实际应用中,应包含错误处理代码,以应对可能出现的网络、权限或兼容性问题。 6. 性能优化:由于...