By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
445,677 Members | 1,174 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 445,677 IT Pros & Developers. It's quick & easy.

Javascript Loading Images

P: n/a
I have a simple script that changes the src and height and width of a
<img>. But when I load the image it changes it size first, streching or
shrinking the previous image, before changing the image. This is because
the picture hasn't loaded yet. How can I have it so that it waits till
the image is loaded before changing the height width and src? I have
been playing around with img.complete and onload but it doesn't want to
work...
Jul 23 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
How can I have it so that it waits till
the image is loaded before changing the height width and src?


Best thing is to first preload the image before changing it.

For example:

var preload;
var wait;
var actualImage = document.images[0];

function changeImage(src) {
preload = new Image();
preload.src = src;
wait = window.setInterval("checkImage();", 500);
}

function checkImage() {
if (preload.complete) {
window.clearInterval(wait);
actualImage.src = preload.src;
// do your stuff
}
}

Jul 23 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.