Javascript 预加载网站标题横幅&；将其添加到缓存

好的，我已经有一段时间没有建立一个网站了，可以这么说，我正试图打破蜘蛛网

我建立了以下网站：

正如您可能已经注意到的，加载标题栏需要很长时间。我知道您可以使用Java和CSS预加载图像，但提供的解决方案似乎都是用于其他页面（即，在主页上预加载图像，以便它们更快地显示在其他页面上）

我想做的是预加载标题栏和所有其他相关图像，将它们存储到缓存中，然后显示主页

这可能吗？如果是这样，请有人提供示例代码或一个如何实现这一点的教程链接

---

谢谢。

首先，在使用懒散加载、预加载和shenanigan加载之前，您应该缩放并优化图像。我几乎窒息了

• 主标题的重量为3.5MB，但可以是
• facebook按钮也有3.5MB的重量，而且它可以是

我刚刚从你的主屏幕上删除了超过7MB的内容

---

除此之外，您还提供1280x720px图像作为150px x 75px按钮。您确实需要显示缩放版本，而不是使用固定高度和宽度的原始图像。

创建一个

/loading.html

页面，如果该“用户”未访问该页面，则重定向到该页面（将其存储在会话或cookie中），使用任何图像进行预加载，完成后再重定向回该页面。或者，隐藏内容区域并显示加载

div

，直到预加载的图像全部加载完毕。我有一个预加载图像的答案，让我看看我是否能找到它。编辑：Java！=Javascript。。。无论如何，你的图像是3.4MB，这太荒谬了。由于您不需要任何透明元素，您可以将其压缩一点（大约100-200KB），然后忘记预加载。@Shomz您建议的最高分辨率/大小是多少？不，不，保持分辨率，保留所有内容。。。让我来帮你，等一下。这是一个46KB的版本，可以在瞬间加载。它已转换为60%JPG：尝试使用压缩率以获得最佳大小/质量。此外，您可能希望修复底部透明部分，例如设置粉色背景。