使用 Jquery 创建元素后淡入淡出答案

【问题标题】：Fade in elements after they've been created with Jquery使用 Jquery 创建元素后淡入淡出
【发布时间】：2017-08-30 04:12:56
【问题描述】：

我想使用 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);

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

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

【问题讨论】：

标签： jquery fadein

【解决方案1】：

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

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

我使用了这个答案中的代码：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>

【讨论】：

嘿，这太棒了。现在对我原来的问题稍作修改：每个元素都伴随着一个
我想与所有图像同时淡入。当图像被缓存时，它们开始淡入淡出，然后
s 在淡入淡出中跳跃。将 .appended 类应用于
和周围的 div 不起作用。有什么想法吗？

【解决方案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);
})

【讨论】：

谢谢@adeneo！这在某种程度上优于@DimSum 的答案吗？因为它包含一些我不熟悉的功能，所以其他答案对我来说更容易理解。
@TonaldDrump 据我了解，不同之处在于：这个答案是“检查加载>追加>淡化”，而我的答案是“追加>检查加载>淡化”。

【解决方案3】：

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

【讨论】：

我想与所有图像同时淡入。当图像被缓存时，它们开始淡入淡出，然后

s 在淡入淡出中跳跃。将 .appended 类应用于

和 周围的 div 不起作用。有什么想法吗？

和周围的 div 不起作用。有什么想法吗？