@aj_nscNov 18.2010 — #.ready() won't work anyway. It doesn't tell you when the images have loaded, it fires when the DOM has been rendered properly, which takes place long before the images are downloaded.
The only way to fire an event after an image has downloaded, that I know of, is to load it up through Javascript itself.
The following would probably work, though (not tested):
var img_ = new Image(); $(img_).load(function() { /* image has downloaded */ }).attr('src','very/large/image.jpg');
It doesn't have to be in that order, the Javascript part could be anywhere in the document. The reason why this should work is that as long as the url in the javascript and the img tag is the same, the browser will be requesting the same resource so the URL should be cached and both the image in the dom and the img specified in the Javascript function should be finished loading at the exact same time.
If this does work, then just put your code where I have /* image has downloaded */ and it will work.
This is an example for a single image, you'll have to be a little bit more inventive for multiple images.
Like this:
<i> </i>var imagesLoaded = 0; var myImages = ['very/large/image1.jpg','very/large/image2.jpg','very/large/image3.jpg','very/large/image4.jpg'];
for(thisImage in myImages) { var img_ = new Image(); $(img_).load(checkLoaded).attr('src',myImages[thisImage]); }
function checkLoaded() { if(imagesLoaded != myImages.length) { imagesLoaded++; return; }
/* your code here will be run once all images are loaded */ }
@sNagheenanajarauthorNov 23.2010 — #this did the trick. now im having the same problem with a div of dynamically created hyperlinks. the div is hidden then populated and displayed on a click event. the first time the div is displayed it shows up blank, on the second mouse click it shows up with the list of hyperlinks just fine. Ive tried adapting this idea of the images to links but it is not working. thoughts?
@aj_nscNov 24.2010 — #Images are different from other HTML content in that when you insert an img tag, it doesn't mean that content is loaded, but when you insert something like <a href="#">Link</a>, the content shows up with (virtually) no delay.
@sohguanhNov 24.2010 — #Then how about the onload event of the body tag. If we put Javascript code in the body tag onload event, we are guaranteed all images <img> tags including the DOM is completed already ?
@aj_nscNov 24.2010 — #No. The only way (again that I know of) to tell if an image has downloaded it is to use a function like jQuery's load function followed by a callback function as I showed you the first time. All other onload, document.ready(), etc type events check to see if the DOM has been rendered properly.
What is the code you are using to populate the DIV with links and then show/hide it onclick?
@sNagheenanajarauthorNov 29.2010 — #So the html is inside a google maps InfoWindow, which is shown on a Markers click event [CODE]... _infoWindow = transformerInfoWindow; _infoDiv = $('#transformerInfoDiv'); ... google.maps.event.addListener(marker, 'click', function(){ _infoDiv.html(getLocationEquipmentHTML(marker.functionalLocation)); _infoWindow.open(map, marker); _infoDiv.show() }); ...[/CODE]
and here's my function that generates the html which is just a series of links for now, it will be a more complex form later on.
The InfoWindow's content always show up correctly on the second click. Sometimes the first click just produces a blank InfoWindow, sometimes it works on the first click. Sometimes if I click one marker, then click a marker I haven't clicked; the first markers html shows up in the second markers InfoWindow. Then of course if I click the second window again the correct html shows up.
Also, when I include the alert the InfoWindow's content always shows up correctly.
@sNagheenanajarauthorNov 30.2010 — #One more note, on the first click an AJAX call is being made. On the second click I'm not seeing any activity on my server so I assume the data is coming from the cache or something similar.