I am trying to fade in a div with 13 images once the images are loaded. The code below works in chrome and FF but only runs the load function 11 times in IE therefore never fading in the div. The each function runs 13 times. Any ideas what's going wrong?
var loadCounter = 0;
$( document ).ready(function() {
var nImages = $("#Content img").length;
$("#Content img").one("load", function() {
loadCounter++;
if(nImages == loadCounter) {
$("#Content").show("fade", 1000);
}
}).each(function() {
if(this.complete) $(this).trigger("load");
});
});
The div:
<div id="Content" style="display:none;">
<div id="front2-01_">
<img id="front2_01" src="images/front2_01.png" width="848" height="225" alt="" />
</div>
<div id="front2-02_">
<img id="front2_02" src="images/front2_02.png" width="697" height="22" alt="" />
</div>
<div id="blog_"><a href=""><img id="blog" src="images/blog.png" width="99" height="81" alt="" border="0" /></a>
</div>
<div id="front2-04_">
<img id="front2_04" src="images/front2_04.png" width="52" height="428" alt="" />
</div>
<div id="front2-05_">
<img id="front2_05" src="images/front2_05.png" width="133" height="406" alt="" />
</div>
<div id="about_"><a href=""><img id="about" src="images/about.png" width="108" height="75" alt="" border="0"/></a>
</div>
<div id="front2-07_">
<img id="front2_07" src="images/front2_07.png" width="456" height="30" alt="" />
</div>
<div id="front2-08_">
<img id="front2_08" src="images/front2_08.png" width="134" height="376" alt="" />
</div>
<div id="comein_"><a href=""><img id="comein" src="images/comein.png" width="133" height="126" alt="" border="0" /></a>
</div>
<div id="front2-10_">
<img id="front2_10" src="images/front2_10.png" width="189" height="376" alt="" />
</div>
<div id="front2-11_">
<img id="front2_11" src="images/front2_11.png" width="99" height="347" alt="" />
</div>
<div id="front2-12_">
<img id="front2_12" src="images/front2_12.png" width="108" height="331" alt="" />
</div>
<div id="front2-13_">
<img id="front2_13" src="images/front2_13.png" width="133" height="250" alt="" />
</div>
</div>