javascript 防止大图像在 src 更改时闪烁
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16737730/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Prevent large image flickering on src change
提问by supersize
I've a problem with image flickering with large images.
In my bodyi have 5 images:
我有大图像闪烁的问题。在我的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">
and one I'm dragging one of them with jQuery UI, all are changing their srcand on dragend as well:
还有一个我正在使用 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'); }
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.
很好很好。但是我需要使用大图像（2000 x 2000 像素），因为可以单击所有图像，然后它们将动画显示为它们不会像素化的视口的完整尺寸。
$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 srcchange at the same time ?
我认为由于每个图像的大小，它们都在闪烁。如果所有人都同时src更改，有没有人知道如何防止图像闪烁？
Thanks for your effort
谢谢你的努力
采纳答案by EGOrecords
The problem you described does not sound like a pre-loading issue to me.
您描述的问题对我来说听起来不像是预加载问题。
For preloading would happen, when you load ANOTHER image from the server once you start to move it around. But like I have read your Question you are moving the DOM-object containing your image in SRC around.
因为一旦你开始移动它，当你从服务器加载另一个图像时，就会发生预加载。但是就像我读过你的问题一样，你正在移动包含你在 SRC 中的图像的 DOM 对象。
Thats most likely a Browser issue, because he has to scale your images down from 2k x 2k to lets say 100 x 100. That is some expensive interpolation stuff to do there. So your main problem could be, like you mentioned, the size of the image.
那很可能是浏览器的问题，因为他必须将您的图像从 2k x 2k 缩小到 100 x 100。在那里做一些昂贵的插值工作。所以你的主要问题可能是，就像你提到的，图像的大小。
Even preloading would not be of use, because you would have the same issues then.
甚至预加载也无济于事，因为那时您会遇到相同的问题。
In my eyes you should have two versions of your image: One small one (the size you want to drag around) and a big one, the one you want to display. The big one can either be loaded automatically in background or on demand, when a user clicks on an image. In the web it is quite common, to show scale the small image to screen size with smooth animations and start to preload in the background and when the preload finished, replace the fullscreen image to remove the pixel effect.
在我看来，您的图像应该有两个版本：一个小版本（您想要拖动的尺寸）和一个大版本，您想要显示的版本。当用户单击图像时，大的可以在后台自动加载或按需加载。在网络中，将小图像缩放到屏幕大小并以流畅的动画显示并开始在后台预加载，当预加载完成后，替换全屏图像以消除像素效果，这是很常见的。
I hope I made myself clear.
我希望我说清楚了。
回答by Sébastien Renauld
The key to what you are trying to do is called preloading. However, you'll need to think carefully about how you want to do this.
您尝试执行的操作的关键称为预加载。但是，您需要仔细考虑如何执行此操作。
Preloading involves loading the image in an imgtag off-screen, but still in the DOM. This caches the image locally, which means that the next time you attempt to use the samesource, it'll pull from cache instead of querying the server for the image (and, thus, flicker).
预加载涉及在img屏幕外的标签中加载图像，但仍然在 DOM 中。这会在本地缓存图像，这意味着下次您尝试使用相同的源时，它将从缓存中提取，而不是向服务器查询图像（因此会闪烁）。
Preloading an image is a simple matter:
预加载图像是一件简单的事情：
(new Image()).src="mysource.png";
What you want to decide is whenyou want to load the images. IF you load them all at first, you'll potentially use up a lot of bandwidth. If you load them on-click, you'll get buffering.
您要决定的是何时加载图像。如果您一开始全部加载它们，则可能会占用大量带宽。如果你点击加载它们，你会得到缓冲。
You can check if an image is loaded using the onloadevent present on img tags and wrapped within jQuery if needed, as follows:
您可以使用onloadimg 标签上存在的事件来检查图像是否已加载并在需要时包装在 jQuery 中，如下所示：
var i = new Image();
i.onload = function() {
console.log("Loaded");
}
i.src = "mysource.png";
Credits to Robin Leboeuf for the concise Image() form.
感谢 Robin Leboeuf 提供的简明 Image() 形式。
回答by Robin Leboeuf
You can use a function like this to preload your images:
您可以使用这样的函数来预加载图像：
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];
}
}
回答by Willem Mulder
See the comments. You should ensure that the images are loaded beforeyou show them. This is called pre-loading and can e.g. be achieved by having hidden images (not using display:nonebut placing them offscreen) that have the SRC that you want.
看评论。您应该确保在显示图像之前加载图像。这称为预加载，例如可以通过隐藏图像（不是使用display:none而是将它们放置在屏幕外）来实现，这些图像具有您想要的 SRC。
Edit: see the more elaborate answer by @Sebástien !
编辑：请参阅@Sebástien 的更详细的答案！
