Fade in images after they have loaded

Question

I found this code to achieve the desired effect and tried it on JSFiddle

http://jsfiddle.net/AndyMP/7F9tY/366/

It seems to work in that it fades the image in after it has loaded. Then I tried it in a webpage and it didn't work the same way, loading the image first rather than fading it in. Although sometimes it seemed like it was fading in at the same time as it loaded.

Is there a more reliable way of achieving this, preferably by amending this code if possible?

$("#image").ready(function(){ $("#preload").fadeIn(1000); });

Answer 1

The only reliable way to fadeIn() an image that is in your actual HTML markup is to set an onload handler in the HTML markup like this:

<div id="image">
    <img id="preload" onload="fadeIn(this)" src="https://photos.smugmug.com/photos/i-NLws86p/0/b356e43a/L/i-NLws86p-S.jpg" style="display:none;" />
</div>

<script>
// this function must be defined in the global scope
window.fadeIn = function(obj) {
    $(obj).fadeIn(1000);
}
</script>

Working demo here: https://jsfiddle.net/jfriend00/X82zY/

Doing is this way, you don't need to give each image an id or class. Just set the style and the event handler in the markup.

The reason you have to put the event handler in the markup is that if you wait until your page's javascript runs, it may be too late. The image may already be loaded (particularly if it's in the browser cache) and thus you may have missed the onload event. If you put the handler in the HTML markup, you will not miss the onload event because the handler is assigned before the image starts loading.

If you don't want to put event handlers in the javascript, then you can do something like this where you use a placeholder for the image in the actual HTML and you use javascript to create the actual image tags and insert them and pull the image URL from the placeholder:

<div>
    <span class="fadeIn" data-src="https://photos.smugmug.com/photos/i-NLws86p/0/b356e43a/L/i-NLws86p-S.jpg"></span>
</div>

<script>
$(document).ready(function() {
    $(".fadeIn").each(function() {
        var src = $(this).data("src");
        if (src) {
            var img = new Image();
            img.style.display = "none";
            img.onload = function() {
                $(this).fadeIn(1000);
            };
            $(this).append(img);            
            img.src = src;
        }
    });
});
</script>

Working demo: https://jsfiddle.net/jfriend00/BNFqM/

The first option will get your images loaded a little quicker (because image loading starts immediately upon page parsing), but the second option gives you more programmatic control over the process.

Answer 2

Pure java script and CSS solution:

Using the transitions effect with opactiy.

const images = document.getElementsByTagName("img");
for (let image of images) {
  image.addEventListener("load", fadeImg);
  image.style.opacity = "0";
}

function fadeImg () {
  this.style.transition = "opacity 2s";
  this.style.opacity = "1";
}

<img src="https://upload.wikimedia.org/wikipedia/commons/6/62/Lunch_atop_a_Skyscraper.jpg" width="190">
<img src="https://upload.wikimedia.org/wikipedia/en/7/7d/Lenna_%28test_image%29.png" width="190">
<img src="https://upload.wikimedia.org/wikipedia/commons/2/21/Mandel_zoom_00_mandelbrot_set.jpg" width="190">