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

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(funct开发者_JS百科ion() {

    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();
    });

});

---

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/

---

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();
});

---

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

See documentation.