转自:
http://blog.mmclub.net/index/view/article_id/36
网站改版的时候碰到一个问题, 那就是 JavaScript 对页面内的图片处理的时候, 在IE 7 下居然失效了. 测试表明 IE6,
FF 都没有问题, 唯独 IE7 对img的 onload 事件不理会. 折腾了半天. 发现原来是 IE 缓存引起的毛病.
比如通常我们对页面的图像重新格式化显示的时候(为什么格式化显示? 很明显后台编辑和前台显示不是同样的尺寸的时候, 图像会影响页面的布局.) 这样做就可以了.
-
<script type=
"text/javascript"
>
-
var
imgs = doucument.getElementsByTagName(
"img"
);
-
for
(
var
i = 0; i < imgs.length; i++) {
-
var
newImg =
new
Image();
-
newImg.src = imgs[i].src;
-
newImg.onload =
function
(){
-
-
if
(newImg.width > 500) {
-
imgs[i].style.width = 500 +
'px'
;
-
}
-
-
}
-
}
-
</script>
通常这样是可以处理了. 但是IE在页面重复刷新的时候, 读取的是缓存里的图片. 速度非常快. 这样的话不知道为什么它就忽略了
onload 事件了. 比较恶心. 处理办法是先告诉浏览器图片载入后要干啥, 然后再去载入图像. 这样就能让IE继续响应图像的 onload
事件了. 像下面的代码:
-
<script type=
"text/javascript"
>
-
var
imgs = document.getElementsByTagName(
"img"
);
-
for
(
var
i=0; i<imgs.length; i++) {
-
var
newImg =
new
Image();
-
newImg.onload =
function
() {
-
-
}
-
newImg.src = imgs[i].src;
-
}
-
</script>
这样就可以啦. 本站这次被这个小毛病阴了一次. 很生气.
分享到:
相关推荐
为了解决这个问题,需要在onload事件处理程序中重新指定img.src属性。这样做的目的是为了告诉浏览器要加载的是一个新的图片资源,以此绕过缓存,从而确保onload事件能够被触发。 以上就是从给定文件信息中提取的...
本文主要讨论的是在IE浏览器中遇到的一个特定问题,即图片的`onload`事件在某些情况下无法正常触发,导致图片加载状态的控制出现问题。 首先,我们要理解`onload`事件的作用。`onload`是HTML DOM(文档对象模型)中...
在Android开发中,WebView是一个非常重要的组件,它允许我们在应用程序中加载和显示网页内容。然而,在不同的Android版本中,WebView的特性和行为可能存在差异,这可能导致开发者遇到一些意想不到的问题。在Android ...
在开发过程中,可能会遇到某些图像源失效的情况。此时,可以通过简单的JavaScript代码来自动替换这些破坏的图像。 **实现方式:** 1. **使用`onerror`事件:**为每个`<img>`标签添加`onerror`事件监听器。 2. **...
标题中的“在IE流览器中正确显示PNG透明图片”是指在Internet Explorer(IE)浏览器中解决PNG图像透明度无法正确显示的问题。PNG是一种支持透明度的图像格式,它允许图像具有半透明或完全透明的区域,使得图像可以...
无关闭按钮IE window.open("aa.htm", "meizz", "fullscreen=7"); 统一编码/解码 alert(decodeURIComponent(encodeURIComponent("http://你好.com?as= hehe"))) encodeURIComponent对":"、"/"、";" 和 "?"也编码 ...
对于不支持该特性的旧版浏览器,可能需要使用其他技术,如使用JavaScript的`onreadystatechange`或`onload`事件来检测图片加载状态。 此外,如果你的应用或网站有大量图片,你还可以考虑使用懒加载(lazy loading)...
在JavaScript中,我们经常需要处理图像的加载情况,特别是在页面设计和交互中。有时,我们需要确保背景图片已经完全加载成功才能进行下一步操作。虽然对于直接的`<img>`标签,我们可以利用`onload`和`onerror`事件来...
3. **图片加载延迟**:如果图片加载速度较慢,可能在浏览器显示出来后,由于网络问题或者图片过大,未能完全加载就触发了某些事件(如onload)导致图片被移除。确认图片的大小和格式是否合适,优化图片以提高加载...
这是因为在IE7中,浏览器会自动去掉文件路径中的分割线,从而使得文件路径失效。对于这种情况,通常的解决方案是尝试其他方法获取文件数据,或者在上传时使用表单提交方式来绕过这一限制。 通过上述讲解,我们已经...
<img src="jsimg/wallpaper.jpg" onload="javascript:if(this.width>screen.width-350) this.width=screen.width-350"> ``` 这段代码会确保图片宽度不超过屏幕宽度减去350像素。 3. **禁止IE6自动缩小大图**: ...
然而,对于不支持JavaScript的用户,这种方法可能会失效。 接下来是使用JavaScript进行图片预加载。通过创建新的`Image`对象,可以实现异步加载图片,不会阻塞页面的渲染。例如: ```javascript function preload...
通过将该URL设置为img元素的src属性,我们就可以在img元素的onload事件中获取到正确的图片宽度和高度。 上述方法的关键点包括: 1. 使用window.URL.createObjectURL方法生成一个指向文件的URL。该方法接受一个Blob...
在JavaScript中实现图片预览功能主要分为两种方法。 第一种方法是利用window.URL.createObjectURL()函数。这个函数可以为输入的文件数据创建一个可访问的URL。这个URL可以被当做一个普通文件路径来对待,并且可以...
尽管`load()`事件通常用于监听元素的加载完成,但它在图片从浏览器缓存中加载时可能会失效,这时获取到的尺寸是不准确的。 为了正确获取动态加载图片的大小,我们需要使用JavaScript的`Image`类。以下是一种正确的...
总结来说,这个解决方案通过CSS实现了未知大小的图片在已知大小容器内的水平垂直居中,同时通过JavaScript进行图片尺寸的适配,确保图片不会溢出容器。这种方法兼容了不同浏览器,提供了良好的用户体验。
在这个过程中,`window.URL.createObjectURL(file)`生成一个临时的、基于Blob的URL,这个URL可以被设置为`<img>`标签的`src`属性,从而在页面上展示选定的图片。 为了使整个过程更加完整,我们可以封装成一个函数,...