javascript - 预加载网站标题横幅并将其添加到缓存

Question

好吧，我已经有一段时间没建网站了，可以这么说，我正在努力扫除蜘蛛网。

我建立了以下网站:http://pinkgiraffecakes.tk/

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

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

这可能吗？如果是这样，有人可以提供示例代码或有关如何实现此目的的教程链接。

谢谢。

Answer 1

首先，在诉诸延迟加载、预加载和恶作剧加载之前，您应该缩放和优化图像。我 ran pingdom on your site差点窒息。

• 主标题大小为 3.5MB，但可以是 optimized lossless to 185Kb
• Facebook 按钮也有 3.5MB，可以是 optimized lossless to 68Kb .

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

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