Jquery: Is there something wrong with my .load()?

Question

I have a problem with this code...
The preloader shows up when this function is fired, but it never hides.
The page also shows up before the image inside it is finished loading.

Is there something wrong with my load function?

$('select.select').change(function() {

    var x = $(this).val();

    //Hide the current page and show the preloader
    $('#page' + x).hide();
    $('#pageLoader *').show();

    //when current page is loaded, hide preloader and show page
    $('#page' + x + ' img').load(function() {
      $('#page' + x).show();
      $('#pageLoader *').hide();
    });

});

Answer 1

Post your html as well...

Or just try it on http://jsfiddle.net/ ;-)

Answer 2

If the <img> element is being created after the event handler is set you will need to bind the handler using live() instead, which will bind to existing and future elements matching the selector on the page:

$('#page' + x + ' img').live("load", function() {
  $('#page' + x).show();
  $('#pageLoader *').hide();
});

http://api.jquery.com/live/

Answer 3

You need to provide a url as the first parameter of the load() function.

See documentation.

Answer 4

If the <img> already has a src attribute you need to loop through and check in the case it comes from cache, like this:

$('#page' + x + ' img').one('load', function() {
  $('#page' + x).show();
  $('#pageLoader *').hide();
}).each(function() { 
  if(this.complete) $(this).load();
});