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

Question

我有一个图像闪烁与大图像的问题.在我的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和dragend:

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

太好了.但是我需要使用大图像(2000 x 2000px),因为所有图像都可以被点击,然后它们将动画到视口的全尺寸,它们不会像素化.

$this.animate(
                { width: 1800, top: -650, left: -250 }, 

                {
                    duration: 4000,
                    easing: 'easeOutElastic'
                }) 

我认为,由于每张图像的大小,它们都在闪烁.如果所有人同时src改变,你们是否有人知道如何防止这种图像闪烁？

谢谢你的努力

Answer 1

您要做的事情的关键称为预加载。但是，您需要仔细考虑要如何执行此操作。

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

预加载图像很简单：

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

您要决定的是何时加载图像。如果您一开始就加载它们，您可能会消耗大量带宽。如果您点击加载它们，您将获得缓冲。

您可以使用 img 标签上存在的事件来检查图像是否已加载onload，并在需要时将其包装在 jQuery 中，如下所示：

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

感谢 Robin Leboeuf 提供的简洁的 Image() 形式。

Answer 2

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

当您开始移动图像时，当您从服务器加载另一个图像时，就会发生预加载。但是就像我读过你的问题一样，你正在移动 SRC 中包含图像的 DOM 对象。

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

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

在我看来，你应该有两个版本的图像：一个小的版本（你想要拖动的大小）和一个大的版本，你想要显示的版本。大的可以在后台自动加载，也可以在用户单击图像时按需加载。在网络中，将小图像缩放到具有平滑动画的屏幕尺寸并开始在后台预加载是很常见的，当预加载完成时，替换全屏图像以消除像素效应。

我希望我说清楚了。