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

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

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 2

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

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

我使用了这个答案的代码：https://stackoverflow.com/a/13893943

＆＃13;

$( 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');
    }
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

在使用Jquery创建元素之后淡入元素

3 个答案: