Fade in elements after they've been created with Jquery

Question

I want to append a bunch of images to a div using Jquery:

elements = '';

for(var i = 0; i < 9; i++) {

  elements = elements + '<img src=img' + i + '>';

}

$('#container').append(elements);

This looks terrible because it's showing each img being loaded one by one. Instead, I want to fade them in once all of them are loaded and rendered. They MUST be faded in together, not one by one.

I have tried:

$('#container').append(elements).hide(0).fadeIn(2000);

But that seems to start the fade in at the beginning of the process, not the end.

Any ideas from you good people? :)

score 1 · Answer 1 · answered Aug 29 '17 at 19:37

1

You'll have to first preload all the images, then add them and fade them in when they have all loaded.

var deferreds = [];
var elements  = $.map(Array(9).fill(0), function(_,i) {
  var img = new Image();
  var def = $.Deferred();

  img.onload = def.resolve;
  img.src = 'img' + i + '.png';
  deferreds.push(def.promise());
  return img;
});

$.when.apply($, deferreds).then(function() {
    $(elements).hide().appendTo('#container').fadeIn(1000);
})

answered Aug 29 '17 at 19:37

adeneo

312,895
29
395
388

Thanks @adeneo! Is this in some way superior to @DimSum's answer? Because it contains some functions I am not familiar with, so the other answer is easier to understand for me. – Tonald Drump Aug 30 '17 at 09:32
@TonaldDrump From my understanding, the difference is: this answer is doing "check loaded > append > fade", while mine is doing "append > check loaded > fade". – DimSum Aug 31 '17 at 01:27

DimSum · Accepted Answer · 2017-08-29T20:12:56.333

It's not about fading in after appending the images, but after all the images are loaded. Use .load() to check if images are loaded.

Example: https://codepen.io/anon/pen/brQrXV

I used code from this answer: https://stackoverflow.com/a/13893943

$( document ).ready(function() {
  elements = '';
  for(var i = 0; i < 9; i++) {
    elements = elements + '<img src="http://lorempixel.com/400/200/sports/' + i + '" class="appended">';
  }
  $('#container').append(elements);
  
  var $images = $('.appended');
  var loaded_images_count = 0;
  $images.load(function(){
    loaded_images_count++;
    if (loaded_images_count == $images.length) {
      $('#container').addClass('loaded');
    }
  });
});

#container img {
  opacity: 0;
  transition: all 1500ms ease;
}
#container.loaded img {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
</div>

Hey, this is great. Now a slight modification to my original question: each element is accompanied by an
that I want to fade in simultaneously with all the images. When the images are cached, they start fading in and then the
s jump in mid-fade. Applying the .appended class to a div around the
and doesn't work. Any ideas? — Tonald Drump, Aug 30 '17 at 09:27

score 0 · Answer 3 · answered Aug 29 '17 at 19:30

0

Append them all at first with a display:none style. After that give to all of them fadeIn();

answered Aug 29 '17 at 19:30

jack

1,391
6
21

Fade in elements after they've been created with Jquery

3 Answers3

that I want to fade in simultaneously with all the images. When the images are cached, they start fading in and then the

s jump in mid-fade. Applying the .appended class to a div around the

and doesn't work. Any ideas?