Question

I am trying to remove html from an unordered list based on missing images, this is what I’m using

$("img").error(function () {
    $(this).parent().remove(); 
});

which strips out the list entry fine. The problem is that the images are used in a carousel, controlled by http://www.thomaslanciaux.pro/jquery/jquery_carousel.htm and they are counted before they are removed which results in blank frames.

any suggestions in getting this code to run in a way which removes the html before the carousel processes it would be greatly appreciated.

Answer 1

You can add another listener on load $('img').load(...) that keeps track of all images, and once all images have been loaded or error’d out, you load the carousel plugin.

For example:

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

startCarousel = function() {
    if (imgCount === 0) {
        $('img').carousel(); // TODO adjust this to match the way you start your carousel
    }
}  

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