防止在src更改时出现大图像闪烁

Prevent large image flickering on src change

本文关键字：图像 闪烁 src      更新时间：2023-09-26

我有一个大图像闪烁的问题。在我的body中，我有5个图像:

<img id="img1" src="img1.png" width="250">
<img id="img2" src="img2.png" width="250">
<img id="img3" src="img3.png" width="250">
<img id="img4" src="img4.png" width="250">
<img id="img5" src="img5.png" width="250">

和一个我用jQuery UI拖拽其中一个，它们都改变了它们的src和拖拽

function dragStart() {
        $('#img2').attr('src','newimg2.png');
        $('#img3').attr('src','newimg3.png');
        $('#img4').attr('src','newimg4.png');
        $('#img5').attr('src','newimg5.png'); }

so fine so good。但是我需要使用大图像(2000 x 2000px)，因为所有的图像都可以点击，然后它们会动画到视窗的全尺寸，而不会像素化。

$this.animate(
                { width: 1800, top: -650, left: -250 }, 
                {
                    duration: 4000,
                    easing: 'easeOutElastic'
                })

我想是因为每个图像的大小，它们都在闪烁。有没有人知道如何防止图像上的这种闪烁，如果所有的src在同一时间改变?

谢谢你的努力

您描述的问题听起来不像是预加载问题。

For预加载会发生，当你从服务器加载另一个图像，一旦你开始移动它。但就像我读过你的问题，你正在移动dom对象包含你的图像在SRC周围。

这很可能是浏览器的问题，因为他必须将你的图像从2k x 2k缩小到100 x 100。这是很昂贵的插值。所以你的主要问题可能是，就像你提到的，图像的大小。

即使是预加载也没有用，因为你会有同样的问题。

在我看来，你的图像应该有两个版本:一个小版本(你想拖拽的大小)和一个大版本(你想显示的大小)。大图既可以在后台自动加载，也可以在用户点击图片时按需加载。在web中，用平滑的动画将小图像缩放到屏幕大小，并在背景中开始预加载，当预加载完成时，替换全屏图像以消除像素效果，这是很常见的。

我希望我说得很清楚。

你要做的关键是所谓的预加载。但是，您需要仔细考虑如何做到这一点。

预加载涉及在屏幕外的img标签中加载图像，但仍在DOM中。这将在本地缓存图像，这意味着下一次尝试使用相同的源时，它将从缓存中提取图像，而不是向服务器查询图像(因此会闪烁)。

预加载图片很简单:

(new Image()).src="mysource.png";

当要加载图像时，要决定的是。如果你一开始就加载它们，你可能会占用大量的带宽。如果你点击加载它们，你会得到缓冲。

你可以检查图像是否加载使用onload事件在img标签和包装在jQuery中，如果需要，如下所示:

var i = new Image();
i.onload = function() {
  console.log("Loaded");
}
i.src = "mysource.png";

感谢Robin Leboeuf提供了简洁的Image()表单。

你可以使用这样的函数来预加载你的图像:

 function imagesPreload(){
     var imgArray = new Array("path/to/img1.jpg", "path/to/img2.jpg", "path/to/img3.jpg");
     for (var i=0; i<imgArray.length; i++) {
         (new Image()).src = imgArray[i];
     }
 }

请看评论。您应该确保在显示图像之前加载了。这被称为预加载，可以通过隐藏图像(不使用display:none，而是将它们放在屏幕外)来实现，这些图像具有您想要的SRC。

编辑:详见@Sebástien !

相关文章：