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

【问题标题】：How can I load an image before it's needed?如何在需要之前加载图像？
【发布时间】：2019-04-10 03:47:14
【问题描述】：

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

我的问题是 div 向下滑动，但背景图像随机“闪烁”。我想要的是 div 与已经加载的图像一起向下滑动。我不知道如何解决这个问题，因为我认为在用户很可能不会全部点击的情况下预加载每个缩略图的大版本是不合理的。

【问题讨论】：

如果我没有理解错，您正在尝试实现 lightbox。网上有几十种预制解决方案，你为什么不使用其中一种呢？你可以从lokeshdhakar.com/projects/lightbox2开始

标签： javascript html css optimization

【解决方案1】：

你可以将图片转成base64并在img标签的src中启用，然后发送到dormulário。

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

【讨论】：

【解决方案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];
}

【讨论】：