使用 Jquery 创建元素后淡入

Question

我想使用 Jquery 将一堆图像附加到 div:

elements = '';

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

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

}

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

这看起来很糟糕，因为它显示每个 img 都在一个接一个地加载。相反，我想在它们全部加载和渲染后淡入淡出。它们必须一起淡入淡出，而不是一个接一个。

我试过：

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

但这似乎是在过程开始时开始淡入，而不是结束。

各位好心人有什么想法吗？ :)

Answer 1

首先使用 display:none 样式附加它们。之后给他们所有人 fadeIn();

Answer 2

您必须先预加载所有图像，然后添加它们并在它们全部加载后淡入。

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);
})

Answer 3

这不是在附加图像后淡入，而是在所有图像加载后淡入。使用 .load() 检查图像是否加载。

示例：https://codepen.io/anon/pen/brQrXV

我使用了这个答案中的代码：

$( 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>

使用 Jquery 创建元素后淡入

Fade in elements after they've been created with Jquery

jquery

fadein