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的持续时间内（在我的示例中为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")
});

在Chrome中淡化大图像

1 个答案: