Preload Image - When Is It Ready?

[wilsonf1]

if i run code like this when my pages loads:MainImage = new Image();MainImage.src = "<%= vPhotoPath %>";MainImageHeight = MainImage.height;how do i know when the image is ready to be displayed?????

[jesh]

how do i know when the image is ready to be displayed?????

MainImage = new Image();MainImage.src = "<%= vPhotoPath %>";MainImage.onload = function() { alert("YO!  THE IMAGE IS READY!"); }

[rnd me]

MainImage = new Image(); MainImage.src = "<%= vPhotoPath %>"; MainImage.onload = function() { alert("YO!  THE IMAGE IS READY!"); }

you really should assign the onload event before you assign the .src.cached images load almost instantly, and it could be loaded before you assign the onload, in which case it would never fire.

[wilsonf1]

is this a good idea then, this code would run via an ajax call to load a big photo:

MainImage = new Image();MainImage.src = "<%= vPhotoPath %>";MainImage.onload = function() { document.getElementById("LargeImage").src = MainImage.src }

this would be in the ajax'd code:<img src="" alt="" id="LargeImage" />reasonable idea?im putting a jquery fade on the image and dont want it progressively loading as it fades in, ruins the effectcheers guys

[jesh]

you really should assign the onload event before you assign the .src.cached images load almost instantly, and it could be loaded before you assign the onload, in which case it would never fire.

That's a good point. It would probably be safer to set the load event handler before you set the source of the image in case the image loads before you assign the handler.