Windows Phone 8上未触发图像加载事件

Question

I wrote a image gallery jQuery plugin for a mobile site I'm developing. For each image in the gallery, I have low res and high res.

The gallery is displayed full screen, with each image populated initially with the low res images. When a user swipes left/right to a given image, I want to began loading the high res image quietly and swap it with the low res when complete.

Right now this is working on iOS and Android, but on Windows Phone 8 the onload event for the high res image doesn't appear to be firing, so the swap never takes place.

Code:

var image = images[images_i];
if (image.$el && image.full && image.$el.attr('src') != image.full) {
    var fullImage = new Image();
    fullImage.onload = function () {
        image.$el.attr('src', image.full);
    };
    fullImage.src = image.full;
}

(gallery generates an 'images' hash that contains each image url, jQuery object, metadata, etc)

I also originally tried actually inserting a new hidden image into the DOM, and using jQuery to bind to the load event. However, I found that this didn't consistently fire if the image was already cached, so I had to add another check for $image.prop('complete'). This produced the same result on WP8.

Answer 1

Apparently I was really close with my first attempt but made the mistake of getting the order of things wrong. All of the answers I have seen on SO about this issue only included the onload event handling for images, but didn't account for the fact that if IE already has cached the image, this event will not fire.

Full solution:

var fullImage = new Image();
fullImage.onload = function () {
    $img.attr('src', fullImageUrl);
};
fullImage.src = image.full;
if ($(fullImage).prop('complete') {
    $img.attr('src', fullImageUrl);
}

$(fullImage).prop('complete') will return true if the image is already cached.