JQuery Image load fails on MobiOne iPhone simulator

Question

I dynamically update an image on a JQTouch site using the following code:

  $('#sv_map')
            .one('load', function() {
                $(this).fadeIn();
            })
            .attr('src', imgURL);

Got the basics of this from here. sv_map is an image, and imgURL points to a valid, existing JPG file.

This code works as expected on all major browsers (Chrome, Safari, Firefox, IE) as well as on actual devices (several iPhones and iPods).

I don't want to conclude that the simulator has a bug (it seems like such a trivial issue). What additional code is needed to ensure that the image file gets loaded? Has anyone had a similar experience with MobiOne?

Answer 1

Not all browsers fire the load event correctly (especially when loading from cache), so you'll need to do it manually by checking .complete on the image, like this:

  $('#sv_map').one('load', function() {
               $(this).fadeIn();
            }).attr('src', imgURL)
              .each(function() {
               if(this.complete) $(this).load();
            });