CODEWITHSUNDEEP
javascripthtmlimage
user2998454
user2998454

Reputation: 155

Get new image to only appear when loaded if source changed

I've been having a problem caused by the previous image staying on the screen until the next is loaded.

My program uses a flowchart where various images are needed for certain questions. I've been using the following code to change the source from one to another.

HTML:

 <img class= 'right' id= 'imageBox' style= 'width: 20%; height: auto;' src= www.1stimage.com/>

javascript:

document.getElementById("imageBox").src = 'www.2ndimagesite.com';

If the computer has a slow connection, the first image could stay on the screen for up to 10 seconds before the next one shows up. How do I get it to not display anything until it's finished?

Thanks.

Upvotes: 0

Views: 334

Answers (3)

Sandro T
Sandro T

Reputation: 15

document.images[i].complete

will be true if picture[i] source is loaded. you could preload all pictures an dont show it until the status change.

Upvotes: 1

Sharikov Vladislav
Sharikov Vladislav

Reputation: 7269

You can change aproach a bit to achieve what you want.

  1. You can preload images and after that just select what image to show. You can read more about this here: http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

  2. You can make start loading new image async and change current image to image like loading spinner or some image, which shows that something is loading at the moment (example: enter image description here) On onload handler you will rewrite this spinner to loaded image.

I wanted to write ~ same that @nedt wrote. Btw, I don't think that his code will help you. I think you will achieve same effect as you said in answer. Anyway, he was first and his answer was close, so I will just use his example. 

document.getElementById("imageBox").src = "loading image link"; // load spinner

var img = new Image(); // load image asynchronously
var newsrc = 'www.2ndimagesite.com';
img.onload = function () { // onload handler
    document.getElementById("imageBox").src = newsrc;
};
img.src = newsrc;

So, old image was loaded on page loaded. You did some action, for example pressed button. If you have low speed, loading spinner will be shown and after new image is loaded async, new image will be shown. If you have enought speed, new image will appear immediately.

Hope this will help you!

Upvotes: 1

nedt
nedt

Reputation: 342

Preload the image and update the src after it's loaded:

var img = new Image();
var newsrc = 'www.2ndimagesite.com';
img.onload = function () {
    document.getElementById("imageBox").src = newsrc;
};
img.src = newsrc;

Upvotes: 2

Related Questions