在Chrome中褪色大图片 [英] Fading in large images in 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会在图片加载时出现延迟（预期），并在图片加载完成后即刻淡入。
在Chrome中，图片加载时会出现常规延迟然后在淡入淡出期间（在我的示例中为3000毫秒）再延迟一段时间，之后图像就像我使用show（）一样简单地出现。
更小的图片在所有浏览器中都能很好地工作。

是什么给出的？我错过了什么？

解决方案

也许尝试将图像的插入一旦加载就移动到DOM中？像这样：

  $（document）.ready（function（）{
 var img = new Image（）; 
 $（img）
 .hide（）
 .load（function（）{
 $（body）。append（this）; 
 $（this ）.fadeIn（3000）; 
}）
 .attr（src，files / originals / 01.jpg）
}）; 
  

I'm having some trouble fading in large images, but only in Chrome.

Here's the absolutely basic setup:

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

As far as I know this is the conventional way to create an image on the fly, load it, and fadeIn when it's done loading. Now, this works perfectly in FireFox, Safari and even IE, but not in Chrome when I use large images (resolutions greater than 1900x1200). And before someone flames about the size I should add that it's a requirement for the project. What happens in all browsers but Chrome is that there's a delay while the image is loading (expected) and as soon as it's done it fades in. In Chrome I get the regular delay while the image is loading and then another delay for the duration of the fadeIn (in my example 3000ms) after which the image simply "appears" as if I used show(). Smaller images work perfectly in all browsers though.

What gives? What is it I am missing?

解决方案

Maybe try moving the insert of the image into the DOM once it has loaded? Like this:

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

这篇关于在Chrome中褪色大图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！