Javascript 防止src更改时大图像闪烁

我有一个大图像闪烁的问题。 在我的

正文中

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

很好，很好。但是我需要使用大图像（2000 x 2000px），因为所有图像都可以单击，然后它们将动画化为视口的完整大小，而不是像素化

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

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

我认为，由于每个图像的大小，它们都在闪烁。如果所有的

src

同时改变，你们有没有人知道如何防止图像上的闪烁

---

感谢您的努力

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

预加载包括在

img

tagoff屏幕中加载图像，但仍在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的简明图像（）表单。

请参阅注释。在显示图像之前，应确保已加载图像。这称为预加载，例如，可以通过具有您想要的SRC的隐藏图像（不使用

display:none

，而是将其置于屏幕外）来实现

---

编辑：请看@Sebástien更详细的回答

您可以使用如下功能预加载图像：

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

function imagesPreload（）{
var imgArray=新数组（“path/to/img1.jpg”、“path/to/img2.jpg”、“path/to/img3.jpg”）；
对于（var i=0；i，您描述的问题听起来不像是预加载问题

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

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

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

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

我希望我说的很清楚。
预加载图像，这样浏览器就不必在那时候下载它们。有很多现有的图像预加载教程。你需要先预加载图像，这样它们会被缓存，然后当你更改src时它们不会闪烁。但有一点我认为我真的不明白，如果我准备好了，它仍然会闪烁拖动它们。这不意味着它们都被加载了吗？那是因为我不再考虑预加载它们了！是的，在这种情况下，您可能会看到浏览器平滑缩小版本的图形的结果。这是什么样的闪烁？图像消失并重新出现？它变得像素化，然后不再像素化？它很快被隐藏，然后出现一个新的！顺便说一句，你不必将它附加到dom中。@KevinB：谢谢，我不知道这一点！假设你必须通过将图像附加到dom中来强制浏览器渲染图像，以强制加载。Omg..left-99999？这没有任何意义。你也可以使用
…@Bondye:Changed.Happy now？@SébastienRenauld在设置src之前绑定加载事件，否则您将无法在IE中捕获加载事件，因为它在缓存的图像上触发得太快。多亏了您，这应该是问题所在，因为所有图像都已加载且仍在闪烁！非常好的观点和您的深思熟虑！谢谢：）有一个问题，我是否可以简单地通过创建div来预加载图像，并在主体中显示我想要的图像？
 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];
     }
 }