javascript - 在 Bootstrap 中防止在移动设备上加载带有 hide-md 或 hide-lg 的图像的最佳方法是什么？

Question

我有一个产品页面，在 Bootstrap 中以砖石格式显示 -md 和 -lg(中型和大型)屏幕的结果，其中图像可能具有不同的高度 - 对于 -sm 或 -xs，我对较小的设备使用相同高度的图像。我有 2 组不同的结果 div，如下所示:

<div class="results hidden-sm hidden-xs">
 ..
 <img src="https://xxx.cloudfront.net/image_860031517015.jpg" width="300" height="583">
 ..
</div>

<div class="results hidden-md hidden-lg">
 ..
 <img src="https://xxx.cloudfront.net/image_300x300_860031517015.jpg" width="300" height="300">
 ..
</div>

问题在于，在移动设备和桌面设备上，两个图像集都会加载到浏览器上，这意味着加载时间更慢，带宽更多。有没有简单的方法来只加载当前屏幕分辨率下可见的图像？

我知道我可以使用 CSS 来做到这一点，但问题是结果是来自数据库的随机结果，因此我无法为每个图像文件创建 CSS 记录。

Answer 1

如果您想阻止加载特定屏幕尺寸的图像，则必须使用 JavaScript。基本上，您想要做的是将图像的 url 存储在数据属性中，例如

<img data-src="/path/to/image.jpg" width="300" height="583">

然后使用 Javascript 来检测是否正在移动设备上查看它(有数千个关于如何执行此操作的示例)，如果是的话，您想做这样的事情...

$('div.results.hidden-md.hidden-lg img').each(function() {
    $(this).attr('src', $(this).data('src'));
});