Question

I have a jQuery problem… for a website using lots of picture (organized per galleries) – http://www.cool-breeze.com – I developped a preloader that loads only the current visible gallery.

It works +/- that way :

jQuery('<img />')
            .attr('src',src)
            .load(function(){
                jQuery("div.cb_div:eq("+item+")").append(jQuery(this));
                ...
            });

Unfortunately, it seems that some pictures are not displayed.

See picture at http://www.cool-breeze.com/dev/cb-load.png. The loaders on the picture are a background of the divs where the pictures are supposed to be loaded (and appended).

I don’t understand why my pictures are not displayed. And if I click once again on “golf in Thailand “for example (that is a javascript link making the gallery visible or not), the missing pictures do appear !

Any idea of how to make the pictures appear from the loading ?

Thank you in advance for any suggestion and best regards,
mhammout

Answer 1

You should bind the load event before setting the “attr” attribute in order to avoid the case in which the image is fully loaded before the event is assigned to your jQuery object.