在web开发在获取图片宽高是很正常的事情，图片在加载完成前是获取不到图片的宽高的，在加载完成后才可以获取图片本身的宽高，例如： 代码如下:var img = new Image();img.src = “loading.gif”;img.onload = function(){ alert ( img.width );};
OK?这段代码看着没什么问题，但在ie中会有一个bug，就是ie第一次打开的时候没问题，第二次使用这个方法就悲剧了，ie没反应了，即使刷新页面也是一样。因为IE会缓存图片，第2次加载的图片，不是从服务器上传过来的，而是从缓冲区里加载的。先写onload方法，再指定这张图片的
在Web开发过程中，图片资源的加载与处理是一个常见的任务，特别是在需要动态计算布局或实现响应式设计时。图片的`onload`事件是用于监听图片加载完成的关键机制，但不幸的是，IE浏览器（尤其是旧版本）存在一些特殊的行为，可能导致`onload`事件无法正常工作。这个问题通常出现在图片被浏览器缓存后重新加载的情况。
IE浏览器为了提高性能，会将加载过的图片存储在缓存中，以便在后续请求相同图片时能够快速从缓存中获取，而不是重新从服务器下载。这在大多数情况下是积极的，但在处理`onload`事件时可能会引发问题。当图片是从缓存中加载时，由于加载速度极快，`onload`事件可能在我们设置事件处理函数之前就已经触发，导致事件处理程序未执行。
以下是一个示例代码，展示了在IE中可能出现问题的情况：
```javascript
var img = new Image();
img.src = "loading.gif";
img.onload = function() {
alert(img.width);
};
```
在这个例子中，如果`loading.gif`已经在IE的缓存中，那么图片加载几乎瞬间完成，`onload`事件可能会在我们为`img`对象设置事件处理函数之前触发。因此，第二次或之后再次加载同一图片时，`onload`事件的回调函数不会被执行。
为了解决这个问题，我们需要确保在设置`onload`事件处理函数后再设定图片的`src`属性，这样可以确保在图片开始加载之前事件处理函数已经准备就绪。修改后的代码如下：
```javascript
var img = new Image();
img.onload = function() {
alert(img.width);
};
img.src = "loading.gif";
```
通过这样的调整，无论图片是否已被缓存，`onload`事件的处理函数都能正确地绑定到图片加载事件上，从而确保在图片加载完成后能够执行预期的操作，如获取图片的宽度和高度。
总结来说，IE浏览器中的图片`onload`事件无效问题主要是由于浏览器的图片缓存机制导致的。为了避免这个问题，开发人员应确保在设置`onload`事件处理函数后再指定图片的`src`属性。这样可以确保事件处理函数总是在图片开始加载之前准备好，从而确保在任何情况下都能正确地处理图片加载完成的事件。这是一个经典的IE兼容性问题，对于需要在不同浏览器下保持一致性的Web应用来说，理解和解决此类问题至关重要。
