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中。这会在本地缓存图像，这意味着下次尝试使用相同源时，它将从缓存中拉出而不是查询服务器中的图像（因此，闪烁）。 / p>

预加载图片很简单：

(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

您可以使用此类功能预加载图片：

 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];
     }
 }

Answer 3

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

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

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

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

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

我希望自己清楚明白。

Answer 4

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

编辑：请参阅@Sebástien更详细的回答！

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

4 个答案: