jquery - Chrome 中大图像的淡入淡出

Question

我在大图像中淡入淡出时遇到一些问题，但仅限于 Chrome。

这是绝对基本的设置:

$(document).ready(function(){
   var img = new Image();
   $(img)
      .hide()
      .load(function(){
         $(this).fadeIn(3000)
      })
      .attr("src", "files/originals/01.jpg")
   $("body").append(img)
});

据我所知，这是动态创建图像、加载图像并在加载完成后淡入的传统方法。 现在，这在 FireFox、Safari 甚至 IE 中都可以完美运行，但当我使用大图像(分辨率大于 1900x1200)时，在 Chrome 中就不行了。在有人对尺寸大发雷霆之前，我应该补充一点，这是该项目的要求。 除 Chrome 之外的所有浏览器中都会发生的情况是，图像加载时会出现延迟(预期)，并且一旦完成就会淡入。 在 Chrome 中，我在加载图像时得到常规延迟，然后在 fadeIn 持续时间(在我的示例中为 3000 毫秒)内得到另一个延迟，之后图像只是“出现”，就像我使用 show() 一样。 不过，较小的图像在所有浏览器中都能完美运行。

什么给了？我缺少什么？

Answer 1

也许尝试在图像加载后将其插入移动到 DOM 中？像这样:

$(document).ready(function(){
   var img = new Image();
   $(img)
      .hide()
      .load(function(){
         $("body").append(this);
         $(this).fadeIn(3000);
      })
      .attr("src", "files/originals/01.jpg")
});