0

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.foo").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!

Bernardo Mendes
  • 1,220
  • 9
  • 15
tom
  • 23
  • 3
  • Are we to assume that you want it to work in IE 8/9 like it does in Firefox, or did you have a different question? – George Cummins Jun 08 '11 at 17:17
  • yes, sorry George, there should be an image carousel but in ie the carousel doesn't load and the images just stack on top of each other. – tom Jun 08 '11 at 17:20

2 Answers2

0

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.

natedavisolds
  • 4,305
  • 1
  • 20
  • 25
  • Hi, thanks, I've now tested this and unfortunately I'm still getting the same response. – tom Jun 08 '11 at 17:33
0

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 ...

Community
  • 1
  • 1
Amith George
  • 5,806
  • 2
  • 35
  • 53
  • Thanks for the info, I'll take a proper look tomorrow. I needed the load as I'm checking for missing images then once they've been accounted for and removed from the html the carousel kicks in. I think I may have to sort this out server side instead which is a little irritating in this instance. Ah well! – tom Jun 08 '11 at 19:44
  • Updated my answer. The error handler will help you remove the missing images. The dom ready will initialize your carousel. So, the load really shouldnt be needed. – Amith George Jun 09 '11 at 16:59
  • yes, the problem with just using the .error was that it wasn't running in time to remove the relevant html before the carousel added spaces for the missing images, so fine in terms of no broken image icons but still got blank frames to scroll through. – tom Jun 10 '11 at 10:25