How to Bind Load event for Image in jQueryMobile

Question

I have a mobile website running jQuery Mobile 1.0a2 and I'm currently testing in Mobile Safari for Firmware 4.1 via the iPhone Simulator.

I cannot seem to bind to the load event for an image.

I have a simple gallery of thumbnails and a large image. When you click on a thumbnail it changes the src attribute of the main img

The js for that uses the live('click' method to bind and it works just fine.

$('.gallery-navigation img').live('click',function() {
  // change source of main image to new
  $.mobile.pageLoading(); // show jquerymobile loading message
});

My problem is that I need feedback on this click, so I wanted to show a loading message (provided by jquerymobile) and then hide it once the image loads.

Where #gallery_image_large is the actual <img> where the src is changing, I tried the following:

$("#gallery_image_large").bind("load", function () {
   $.mobile.pageLoading(true); // hide jquerymobile loading message
});

This works in Safari on my desktop but does not in the iPhone Simulator mentioned above.

For reference:

• jQuery Mobile Loading Message Methods

UPDATE: I am experimenting with JQuery Image load fails on MobiOne iPhone simulator, which explains how to implement the .load manually by "checking .complete".

Answer 1

I changed the structure of my jquery and it's seemed to have fixed it!

$('#gallery_image_large').one('load',function() {
    try { // a grade  
        $.mobile.pageLoading(true);
    } catch(err) { // low grade

    }
}).attr('src',full_src);

(as you can see, I opt'd for a try { .. } catch { .. } to verify jquerymobile is available.

Although I didn't use the solution (directly) from JQuery Image load fails on MobiOne iPhone simulator, the manual firing of load via .complete is probably a good solution for anyone else out there!