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

Answer 1

fadeIn should be called after the image has loaded. Here is an example: http://jsfiddle.net/mYYym/

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="http://lorempixel.com/400/200/">
<img src="http://lorempixel.com/g/400/200/">
<img src="http://lorempixel.com/400/200/sports/">

Answer 3

Here's a css transition and javascript solution based on @jfriend00's answer and similar to the approach of @Robbendebiene:

• provides fallbacks to display the image if js is turned off
• only the one bit of inline javascript is required onload="this.style.opacity=1"
• all animation is CSS, no need for jQuery or complex javascript

img.fadein {
  opacity: 1;  /* fallback in case of no js */
  transition: opacity 500ms ease;
  max-width: 100%;
  height: auto;
}
.js img.fadein {
  opacity: 0; /* start with hidden image if we have js */
}

<!-- use moderinr to provide the "js" class on the html element -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<img class="fadein" onload="this.style.opacity=1" src="http://lorempixel.com/1500/1500/">

Answer 4

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 5

Maybe interesting for people who find this question and use angular.js:

I've written a small directive which does the job quite well.

JS:

.directive('imgFadeInOnload', function () {
    return {
      restrict: 'A',
      link: function postLink(scope, element, attr) {
        element.css('opacity', 0);
        element.css('-moz-transition', 'opacity 2s');
        element.css('-webkit-transition', 'opacity 2s');
        element.css('-o-transition', 'opacity 2s');
        element.css('transition', 'opacity 2s');
        element.bind("load", function () {
          element.css('opacity', 1);
        });
        element.attr('src', attr.imgFadeInOnload);
      }
    };
  });

HTML:

<img img-fade-in-onload="{{imgSrc}}" src="">

By setting src not in the HTML but in the directive code the problem mentioned by jfriend00 (handler is attached after the onload is fired) is solved.

Answer 6

html

<div id="image">
    <img id="preload" src="http://farm8.staticflickr.com/7227/7007769551_3b5b1640ea_b.jpg" style="display:none;" />
</div>

javascript

.ready() does not fire they way you think it does, see the 'load' jQuery event handler

$("#preload").load(function(evt){
      $(this).fadeIn(1000);
});