Chrome 中大图像的淡入淡出

发布于 2024-09-28 00:27:14 字数 627 浏览 3 评论 0原文

我在大图像中淡入淡出时遇到一些问题，但仅限于 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() 一样。不过，较小的图像在所有浏览器中都能完美运行。

什么给？我缺少什么？

原文

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

海夕 2024-10-05 00:27:14

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

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

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")
});

回复收藏 0 原文

~没有更多了~