0

想法是在图像加载时显示加载 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(); 
}
});
4

1 回答 1

1

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

有两种可能的解决方法：

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