javascript - 具有多个 HQ 背景图像的视差网页的预加载器？

Question

是否有人能够帮助为包含许多设置为多个 div 的背景(背景大小:封面；)的大型图像文件的单个网页实现加载屏幕？到目前为止它太过分了——它们有 1920 像素的宽度，大约有 68 个，总共大约 100mb——但到目前为止，我在网络优化方面完全是个新手。

我正在查看此网站上使用的加载屏幕:http://thecolorshop.co/product/ginger/我不介意任何建议 - jquery 很好

我知道加载时间并不完全取决于页面文件的大小(但我会将图像的大小减小到至少 1500 像素宽度)但是任何人都知道如何快速加载此页面吗？最小延迟:http://brookandlyn.com/fieldtrip/#intro - 虽然它是一个带有一些高分辨率照片(宽度为 1920 像素)的单个视差网页。

谢谢!

Answer 1

图像的文件大小不仅限于实际像素大小，您还可以通过使用 photoshop 或使用像 http://www.smushit.com/ysmush.it/ 这样的服务来减小它。这将使您的图像文件大小更小或尝试使用这个免费的网站图像编辑器 https://pixlr.com ..

100 米的网站页面是一个很大的禁忌!实际显示的加载时间和带宽对于移动数据来说太多了，在这个时代也没有必要。

您可以使用延迟加载图像，这将有助于根据需要加载图像，从而从一开始就减少所有图像的加载。

我不认为加载屏幕会对您有所帮助首先您需要减小图像的文件大小，以便它们更小(以 mb 为单位)100mb 除以 62 是每张图像 1.6mb，因此您可以缩小图像到 300kb 左右，这意味着您的总图像将达到 18mb 左右，这将对您的网站加载产生巨大影响，然后为您提供一个基础，以开始使用延迟加载图像和其他工具进行更多优化。

希望这可以帮助您开始减小文件大小。