Question

情况：

我正在使用javascript调整大小/预加载图像，然后在页面上显示它们。

问题：

ie7 / 8倾向于随机激发某些图像的加载事件而不是其他图像（这是完全随机的，每次刷新都不同）

代码：

JS：

$(document).ready(function(){
$(".daImg").hide();
$("figure").each(function(){
    $(this).append('<div class="loader"><img src="images/ajax-loader.gif"></div>');
    var afb = $(this).find(".daImg");
    afb.load(function(){
    console.log("loaded");          
    $(this).parent().parent().parent().find(".loader").remove();
    if($(this).parent().parent().parent().is(".last")){
        if(afb.height() > 280){
            var w = (afb.width()/afb.height())*280
            afb.css("width",w);
            afb.css("height","280px");
        }
    } else {
        if(afb.height() > 245){
            var w = (afb.width()/afb.height())*245
            afb.css("width",w);
            afb.css("height","245");
        }
    }
    afb.css("left","50%");
    afb.css("margin-left","-"+afb.width()/2+"px");
    afb.fadeIn();
    })
});
}

HTML

 <figure class="left">                      
<a href="foobar.html">
    <div class="imageWrap">
        <img class="daImg"  src="foo-bar.png" alt="foobar" />
    </div>
    <figcaption class="cufonize"><span class="decorated">foobar</span><br> 
        <span class="price">99</span>
    </figcaption>
</a>

<figure class="left">                       
<a href="foobar.html">
    <div class="imageWrap">
        <img class="daImg"  src="foo-bar.png" alt="foobar" />
    </div>
    <figcaption class="cufonize"><span class="decorated">foobar</span><br> 
        <span class="price">99</span>
    </figcaption>
</a>

<figure class="left">                       
<a href="foobar.html">
    <div class="imageWrap">
        <img class="daImg"  src="foo-bar.png" alt="foobar" />
    </div>
    <figcaption class="cufonize"><span class="decorated">foobar</span><br> 
        <span class="price">99</span>
    </figcaption>
</a>

<figure class="left">                       
<a href="foobar.html">
    <div class="imageWrap">
        <img class="daImg"  src="foo-bar.png" alt="foobar" />
    </div>
    <figcaption class="cufonize"><span class="decorated">foobar</span><br> 
        <span class="price">99</span>
    </figcaption>
</a>

<figure class="left">                       
<a href="foobar.html">
    <div class="imageWrap">
        <img class="daImg"  src="foo-bar.png" alt="foobar" />
    </div>
    <figcaption class="cufonize"><span class="decorated">foobar</span><br> 
        <span class="price">99</span>
    </figcaption>
</a>

如果有人能够了解这里发生的事情，我会很感激！

注意：此问题与缓存无关，因为我在实际代码中为所有图像添加时间戳。

Answer 1

你可以在你的案例中尝试不同的方法

使用css

.daImg {
   display:none;
}

然后将图像大小调整脚本挂钩到$（window）.load（）; 并操纵所有图像：不是（：可见）一次

您还可以将其余浏览器复制到img.load事件，但是对于尚未显示的图像。我的意思是你的选择器是var afb = $(this).find(".daImg:not(:visible)");

在这种情况下，IE将处理未被其他事件处理的所有图像

图像加载事件在IE7 / 8中随机触发

1 个答案: