I'm developing an awesome feature that needs polishing, this question is a bit of a longshot but I'm curious to know whether what I want is even possible.
Here's the deal, a photo viewer:
http://www.jungledragon.com/image/2748/fierce_crested_caracara.html/zoom
It works. Now I'm working on a new feature (not deployed in that example yet). It's an "HD" function. When clicked, it will switch the source of the big image on screen to the original format. That means the image source will be replaced with the image as it was uploaded, which means a very high resolution and file size. The result is ultra crisp photo viewing, even on large monitors and TVs.
Here's the preloading part of my code:
$("#HD").live('click', function(e) {
var imageID = $("#bigimage img").attr('id');
$.post(basepath + 'image/' + imageID + '/hd',function(data) {
var imagePreloader = new Image();
imagePreloader.src = data;
$(imagePreloader).imagesLoaded(function() {
var img = $("#bigimage img");
// set the image src, this effectively shows the image
img.attr({ src: data });
});
});
e.preventDefault();
});
This code will first retrieve the URL of the original image, which is protected. Next, it will preload that image and when done, adjust the source of the big image to replace it with the original size image URL.
All of this works fine. The problem is that once the image is loaded and I set the new src attribute, the actual "drawing" of the image on screen takes several seconds. You can see it vertically building up pixels. I rather have the lesser image in place to be replaced with the high res one in a big bang rather than this progressive rendering.
Is it possible to detect when an image is not only loaded, but also rendered?
Update: Did some browser testing and noticed the issue of the image "building" up only occurs in Firefox (currently using 8.0), but not in Chrome, Safari, Opera or even IE9. This reduces my problem to FF only so it seems.
