我正在使用 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>
最佳答案
您要向用户显示 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>
关于javascript - 优化图像加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40969128/