javascript - 防止大图像在 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 2000 像素)，因为所有图像都可以单击，然后它们将动画化为它们不会像素化的视口(viewport)的完整尺寸。

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

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

我认为由于每个图像的大小，它们都在闪烁。如果所有 src 同时更改，你们有没有人知道如何防止图像闪烁？

谢谢你的努力

Answer 1

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

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

这很可能是浏览器问题，因为他必须将您的图像从 2k x 2k 缩小到比方说 100 x 100。这是一些昂贵的插值操作。因此，就像您提到的那样，您的主要问题可能是图像的大小。

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

在我看来，您应该有两个版本的图像:一个小的(您想要拖动的大小)和一个大的，您想要显示的那个。大的可以在后台自动加载，也可以在用户单击图像时按需加载。在 web 中很常见，将小图像缩放到屏幕大小，动画流畅，并开始在后台预加载，预加载完成后，替换全屏图像以消除像素效果。

我希望我说清楚了。