Question

Situation:

I am resizing / preloading images with javascript before showing them on the page.

Problem:

ie7 / 8 tend to randomy fire the load event for some images and not for others (this is completely random and different on every refresh)

Code:

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>

If anyone could shed some light of what is going on here, I’d appreciate it!

Note: This issue has nothing to do with caching as I am adding time-stamps to all images in my actual code.

Answer 1

you may try a different approach in your case

use css

.daImg {
   display:none;
}

then hook your image resizing script on $(window).load();
and manipulate all images :not(:visible) at once

you could also duplicate this for the rest browsers to the img.load event but for images that are not already visible. i mean your selector to be var afb = $(this).find(".daImg:not(:visible)");

in this case IE all images that are not processed by the other event will get processed there