Display temporary image until an image are loaded

Question

I want to display temporary image in an HTML page until original image is loaded. How can I do that?

<!-- IMG -->
<img src="original.jpg" temporary-img="temp.jpg"/> <!-- i have no idea how to do that ! -->

is your original image that big that there is a lot of load time? — Rajshekar Reddy, Dec 28 '16 at 13:50
I take image from an link. The server are loading slowly ... and i take multiple image in one page... — Robeala, Dec 28 '16 at 13:51
You can have another image tag which fetches a small sized image from your local folder.. And on the original image `load` event you can remove the temporary image.. — Rajshekar Reddy, Dec 28 '16 at 13:52
may be this will help you a bit http://stackoverflow.com/a/13860853/2592042 — Rajshekar Reddy, Dec 28 '16 at 13:54

score 4 · Accepted Answer · answered Dec 28 '16 at 13:58

If the original image is still loaded you can make the following in the HTML:

<img src="temp.jpg" id="img" data-original-img="original.jpg"/>

If the DOM is loaded, you can use the image, eg. Exchange as follows:

$(function() {
  $('#img').attr('src', $('#img').attr('data-original-img'));
});

score 1 · Answer 2 · answered Dec 28 '16 at 13:55

1

You can add a background image using CSS.

img {
  background: url('temp_image.png') no-repeat;
}

answered Dec 28 '16 at 13:55

the-petrolhead

@RajshekarReddy it's not stupid... css load the background with a temporary image and when the image is load she's hover the background... it can help OP – Alexis Dec 28 '16 at 13:59
This doesn't work in case the loaded image has a transparent background, in which case you will see the default image in the back :( – Felipe Jun 18 '17 at 13:42

2 Answers2