jquery wont run until I refresh the page ie 8-9

Hi the following code is to look for missing images, remove containing < li> elements and then run a carousel plugin.

this works without any problem in firefox, chrome, etc but seems to get stuck in ie 8 and 9 (7 seems to work) until I refresh the page.

an example page is http://www.owenarchitects.co.uk/project_010.php

the code I'm using is

$(function(){

  var startCarousel, imgCount = $('img').length;

  startCarousel = function() {
    if (imgCount === 0) {

      $("div.f开发者_如何学JAVAoo").carousel(); // TODO adjust this to match the way you start your carousel

    }
  }  

  $('img').load(function() {
    imgCount--;
    startCarousel();
  })

  .error(function() {
    imgCount--;
    $(this).parent().remove();
    startCarousel();
  }); 
}); 

Thanks!

It sounds like it isn't working because startCarousel in the img load and error events isn't defined until the page is loaded. On refresh the page is cached and loaded faster so the method is defined then.

To test this, can you put your $('img').load and .error in the $(function(){ declaration? I realized that it is probably not want you want to end up with.. but I'd like to see if my hunch is correct before giving any other specific answers.

Edit 2:

A google search lists many pages on how to detect missing images and remove them. There is even a StackOverflow question for the same. The basic premise is to use the .error function for it. Which is what you are already doing in the script you posted. So, relying on .load() isnt needed. The documentation of .error doesnt list any caveats nor has anyone posted any recent issues with its implementation ...

Edit 1:

A casual google search for jquery based carousels led me to this one ... http://www.thomaslanciaux.pro/jquery/jquery_carousel.htm

Check out this fiddle. http://jsfiddle.net/yvE2c/ ... its uses your images, simple html and a real simple carousel initialization... it also works in IE7-9 browser modes ... Unless you explicitly need the .load functionality for something else, consider using this or some other simple-to-use carousel ...

I looked at your test page in IE9. Switched the browser rendering mode from IE7 till IE9. It never worked on the first run in any browser mode. Even after the first run, once the images get cached, if you refresh multiple times one after the other, it wouldnt consistently start consistently ... I am not really sure what the issue is, but reading the jquery documentation for the .load() I noticed the following comment

dpn't know about Gecko, but at least in Opera .load() doesn't fire for images that allready lie in the browser's cache ... writing something like

$("#myImg").one("load",function(){ //do something }) .each(function(){ if(this.complete) $(this).trigger("load"); });

seems to solve the problem.

The responses of other users to this comment seem to indicate this is a major issue. You may want to add this fix and see if your carousel starts properly ...

The documentation also lists the following caveats

Caveats of the load event when used with images

A common challenge developers attempt to solve using the .load() shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are:

It doesn't work consistently nor reliably cross-browser
It doesn't fire correctly in WebKit if the image src is set to the same src as before
It doesn't correctly bubble up the DOM tree
Can cease to fire for images that already live in the browser's cache

You may want to find another way to start your carousel ...