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会立即加载图像。

有两种可能的解决方法：

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

Hide（）div不在IE上工作，但在Chrome / firefox上工作

1 个答案: