Hide() div 不在 IE 上工作，但在 Chrome/firefox 上工作

Question

想法是在图像加载时显示正在加载的 div，并在完成时隐藏 div。此代码适用于 Chrome/firefox，但不适用于 IE。有什么想法吗？

HTML 文件

//image
<img src="image.php" class="loading">

//loading tag
<div id="loaddiv">
    <div id="loading_float"><img src="src/img/loading.gif">
    <br>Loading..
    </div>
</div>

JS 文件

var imgs_count=0, imgs_loaded=0;
$(function(){
$loading = $('.loading');
if($loading.size()>0){
    $loading.load(function(){
        $('#loaddiv').hide();
    });
}else{
    $('#loaddiv').show(); 
}
});

Answer 1

您不能可靠地使用 javascript 将 onload 处理程序附加到页面 HTML 中的图像。这是因为图像可能在您的 javascript 甚至有机会运行之前就已经加载，因为页面 DOM（以及它所引用的图像）在 javascript 有机会运行并找到那些非常 DOM 元素之前开始加载。一旦图像在浏览器缓存中，这个问题在 IE 中会更严重，因为在这种情况下 IE 几乎会立即加载图像。

有两种可能的解决方法：

1. 在实际 HTML 中使用 onload 属性指定 onload 处理程序。
2. 不要将图像放在页面的 HTML 中。使用 javascript 动态创建它们并在图像对象上设置 .src 属性之前分配 onload 处理程序，因此您一定不会错过 onload 事件。
3. 当您的 javascript 运行时，在您安装负载处理程序之前，请检查图像是否已加载并采取相应措施。