图像存储在本地并预加载，但加载速度仍然很慢答案

【问题标题】：Images are stored locally and preloaded, but they still load very slow图像存储在本地并预加载，但加载速度仍然很慢
【发布时间】：2020-10-22 16:02:55
【问题描述】：

我有一些大图像（6-10 mb），我将它们存储在本地（在我的 PC 上的一个文件夹中），我使用函数 (var myImg = document.createElement("img"); myImg.src = "path_to_image.jpg";) 预加载它们并在正文加载时调用它。 (onload="myFunc();") 实际上，我使用该函数来预加载所有需要的元素，而不仅仅是图像。

尽管如此，当我单击显示图像的按钮时，仍然需要一些时间来加载图像。这是为什么？我不从服务器下载它们，我什至预加载它们。我该怎么办？

顺便说一句，它是我用 HTML/CSS/JS 构建的一个网络应用程序。

【问题讨论】：

标签： javascript html web-applications

【解决方案1】：

我唯一能想到的是图片太大/质量太高。尤其是当您将它们用作背景图片时。

尝试使用类似的东西：

https://compressor.io/
https://imagecompressor.com/

【讨论】：

【解决方案2】：

使用 JPEG 图像，对照片进行有损压缩是可以的，而不是使用 PNG 图像的无损压缩。

Google 推出了一种新的图像格式 WebP，它生成的图像文件比 JPEG 小 25% 到 34%。所以使用WebP格式会更好。

【讨论】：