hiding image until src updated

[brixton]

Hello,

I'm having a site where, at the page load, I'm updating the src of an image using an Ajax call, and then using the response to set the new src attribute.

The problem is, the page finishes loading before my images have been updated (or fully loaded). This means the images first show up incorrectly for some milliseconds, before changing to their correct image after the src has been updated.

I'm triggering the image action on window.onload. I'm actually doing this now:

function init() {
    hideImages(); // hide all images on site
    checkImages(); // modifies the src of every image
    showImages(); // shows all the images again
    document.getElementById('main').style.display = "block"; // makes content visible since it's got display:none by default
}
window.onload = init;

How should I do this?

Thanks!

[larztheloser]

If I understand you correctly, all you need to do is put a delay of a few milliseconds before you call showImages(), as the images are being shown before they can be updated with the new source. Test your site on a slow connection as these can be slower to update, to ensure you have set your timer to the correct length.

[gits]

a delay is not really nice nor is it really reliable ... have a look at the image's onload handler ... which can be used for such purposes ... with that you have an event on which you could trigger the init-function.

kind regards

[larztheloser]

True about the delay. I'm not sure if onload will work, though - I mean, after all, the image already HAS been loaded! If onload does work, I'll be very interested. If not, try the delay. You probably won't need more than a few millisecs anyway, which won't really make much of a difference - even for users with dial-up.

[gits]

by changing the src-attribute a async request to the 'new' ressource is made in any case ... onload is fired when this request is finished ... so it should work when the flow of all the code is correctly arranged. delays should never be used to do things that could have a defined state but currently don't. delays should only be used in cases where they really make sense ... like delaying the call of a function in a suggest-field so that the user might type in something and the function/request is not started on every single keystroke - or similar cases. So the basic rule of thumb is to avoid delays wherever you can since it often is just a beginner workaround instead of fixing the code flow correctly.

[larztheloser]

Wow. So doesn't this mean that if I load a page into a div using AJAX an onload event would be fired for that request? Why do people use onReadyStateChange then?

[gits]

images cannot be transfered with an XMLHttpRequest (except when the data is transfered base64 text encoded or something like this) ... so the loading of plain data is not in sync with images ... setting just the src-attrib of an image will result in a new async request that needs to be synced again with the image's onload event (at least when a sync flow is needed).

anyway ... use the delay when you want to fiddle with the concrete values that the delay should have ... it is just try and error then or just a waste of time when the value is to large only to work reliable. everybody tries to tweak performance out of a webapp and then we use delays? what logic does that follow?

[brixton]

Thanks guys, I'll try this out and let you know if I have any luck!