How to empty IMG element quickly?

Question

I've built a modal image gallery. When the user clicks next to see next image I run something like:

document.getElementById('gallery-image').src = newSRC;

My problem is that there is a delay from when the user clicks next to where the image actually changes. (due to the new image being loaded). I want to "empty" the image element the moment the user clicks next. I tried doing this:

    document.getElementById('gallery-image').src = '';
    setTimeout(function(){
        document.getElementById('gallery-image').src = newSRC;
        }, 100);

to no avail. How can I "empty" the IMG element until the new image starts loading on it?

Have you tried `img.src = "about:blank"`? – Kernel James Jun 26 '12 at 05:13 — Kernel James, Jun 26 '12 at 05:13

score 5 · Accepted Answer · edited May 23 '17 at 12:04

There are three main ways to do this. Your question seemed to suggest you want to create an effect similar to a slide projector changing slides, so I have written this answer with that in mind.

Temporarily set the src property to a 1x1 transparent GIF instead of the empty string. This is most similar to what you tried to do and perhaps is the simplest method.

The data URI below is from Blank image encoded as data-uri and should work in Internet Explorer 8 or higher and the other major browsers. Using a data URI avoids the need to store a separate file on your web server and preload it when your page loads. You may need to set the width and height attributes of the img element to preserve the layout of your page.

This code does not preload the image at the start of the time delay (although it would be possible to do so), thus the apparent delay to the viewer is the sum of the programmed time delay and the time taken to load the image. The loading time will only be close to zero if the browser has already cached the image or if the web server is on the local network.
```
var gi = document.getElementById('gallery-image');
gi.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
setTimeout(function(){
    document.getElementById('gallery-image').src = newSRC;
}, 100);
```

Temporarily set display: none;, and use an onload function to undo the change once the time delay has elapsed and the image has loaded. The code below starts loading the image at the start of the time delay, which depending on the viewer's connection speed, may result in a more consistent apparent delay.

var gi = document.getElementById('gallery-image');
var delayElapsed = false;
var imageLoaded = false;

gi.style.display = 'none';

setTimeout(function(){
    delayElapsed = true;
    maybeShowImage();
}, 100);

gi.onload = function() {
    imageLoaded = true;
    maybeShowImage();
};
gi.src = newSRC;

function maybeShowImage() {
    if (!delayElapsed || !imageLoaded) {
        return;
    }
    gi.style.display = '';
}

Do the above, but set visibility: hidden; instead. This may have the advantage of not affecting the page layout where display: none; would.

// [...]

gi.style.visibility = 'hidden';

// [...]

function maybeShowImage() {
    if (!delayElapsed || !imageLoaded) {
        return;
    }
    gi.style.visibility = '';
}

score 1 · Answer 2 · answered Jun 26 '12 at 03:59

1

You could hide the image and then reshow it...

// Hide
document.getElementById('gallery-image').style.display = "none";

// Show
document.getElementById('gallery-image').style.display = "";

answered Jun 26 '12 at 03:59

alex

479,566
201
878
984

1

I agree, but where do you put the re-show code? In the img element's `onload`? Another option is to remove the img element entirely and then append a new one with the new `src` set. – nnnnnn Jun 26 '12 at 04:03
like more your suggestion. Also doesn't onload fires when image is fully loaded? I want to show it when it starts being loaded. I'm not sure how to remove and create new element in same place though. – lisovaccaro Jun 26 '12 at 04:09
There are [several ways to add and remove elements](http://www.google.com.au/search?q=adding+and+removing+elements+with+javascript). – nnnnnn Jun 26 '12 at 04:28

How to empty IMG element quickly?

2 Answers2