如何在需要之前加载图像？

Question

我正在开发一个带有图片库的网站。有一个带有数十个缩略图的图像网格。用户单击图像时，div从顶部向下滑动。该div的CSS使用JavaScript进行了修改，以更改背景图片。

我的问题是div向下滑动，但是背景图像随机“闪烁”。我想要的是div向下滑动已加载的图像。我不确定如何解决此问题，因为我认为当用户极有可能不会单击所有缩略图时，预加载每个缩略图的较大版本是不合理的。

Answer 1

您可以将图像转换为base64并在img标签的src中启用它，然后发送dormulário。

此使用示例：https://hdtuto.com/article/how-to-convert-image-into-base64-string-jquery

Answer 2

一种预加载图像的方法是使用javascript创建图像对象

这是一个例子：

HTML：

<img src="photo1.jpg" id="photo" />

Javascript：

var photo = document.getElementById("photo");
var loadImage = new Image();
loadImage.src = "YourSrc/image.jpg";

最后一步，当您要更改为预加载的图像时，请在事件处理程序中使用以下代码：

photo.src = loadImage.src;

如果您要预加载多个图片，请使用数组和循环。

imageSrcs = ["imgsrc1.jpg", "imgsrc2jpg", "imgsrc3jpg"];
preloadedImages = [];

for(var i = 0; i < imgSrcs.length; i++)
 {
preloadedImages[i] = new Image();
preloadedImages[i].src = preloadedImages[i];
}