在Chrome中淡化大图像

我在渲染大图像方面遇到了一些麻烦，但仅限于Chrome。

这是绝对基本的设置：

  $（文件）。就绪（函数（）{
    var img = new Image（）;
    $（IMG）
       。隐藏（）
       .load（函数（）{
          $（本）.fadeIn（3000）
       }）
       .attr（“src”，“files / originals / 01.jpg”）
    $（ “身体”）。追加（IMG）
 }）;

据我所知，这是创建动态图像的常规方法，加载它，并在加载完成后淡入淡出。 现在，这在FireFox，Safari甚至IE中完美运行，但在使用大图像（分辨率大于1900×1200）时不适用于Chrome。 在有人大火之前，我应该补充一点，这是项目的要求。 在所有浏览器中都会发生什么，但Chrome会在图像加载（预期）时出现延迟，并且一旦完成就会消失。在Chrome中，我会在图像加载时获得常规延迟，然后在图像加载期间再次延迟fadeIn（在我的例子中为3000ms）之后，图像只是“出现”，好像我使用了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") });