优化图像加载

Question

我正在使用 lightbox2 插件。我有两张图片：ori-img.jpg 大约 10MB，而我的 thumb-img.jpg 只有 200KB。当用户点击 thumb-img.jpg 时，将显示一个带有 ori-img.jpg 的模态框。我想知道是否：

页面加载时正在加载ori-img.jpg (10MB)？这意味着所有原始图像都将在用户打开之前加载？
如何防止用户消耗不必要的额外互联网数据来加载未打开的图像（原始）？

下面gallery.php

中的部分示例代码

<a class="example-image-link" href="images/ori-img.jpg" data-lightbox="example-set" data-title="Original Image">
<img class="example-image" src="images/thumb-img.jpg" alt="Thumbnail Image">
</a>

Answer 1

您要向用户显示 10MB 图片的目的是什么？在我看来，它们有点超重，您可以将图像优化为 1-2MB。这取决于字体端部分如何加载图像。可以动态加载它们。请参阅此处的示例 Loading Images into Div Dynamically, https://perishablepress.com/3-ways-preload-images-css-javascript-ajax/, Programmatically change the src of an img tag。

如果您这样定义 HTML，lightbox2 将不会预加载图像

<a href="images/image-1.jpg" data-lightbox="image-1" data-title="My caption">Image #1</a>

这里有一些细节http://lokeshdhakar.com/projects/lightbox2/#options

优化图像加载

Optimize image load

html

javascript

lightbox2

image-preloader