6

I've a problem with image flickering with large images. In my body i have 5 images:

<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">

and one I'm dragging one of them with jQuery UI, all are changing their src and on dragend as well:

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. But I need to use large images (2000 x 2000px) because all images can be clicked and then they will animate to the full size of the viewport that they dont pixelate.

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

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

I think because of the size of every image, they are flickering. Does anyone of you have an idea how to prevent this flickering on images, if all src change at the same time ?

Thanks for your effort

4

4 回答 4

4

您尝试执行的操作的关键是预加载。但是，您需要仔细考虑如何执行此操作。

预加载涉及将图像加载到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() 表单。

于 2013-05-24T14:50:41.793 回答
4

您可以使用这样的函数来预加载图像：

 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];
     }
 }
于 2013-05-24T14:53:27.360 回答
4

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

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

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

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

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

我希望我说清楚了。

于 2013-05-24T15:20:58.307 回答
0

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

编辑：查看@Sebástien 更详尽的答案！

于 2013-05-24T14:51:15.040 回答