css - 防止 Bootstrap 预加载所有 hidden-* 图像

Question

我正在运行 Twitter Bootstrap 3.2。

我的页面上每个断点都有一个横幅图片。这意味着像这样的代码:

<img class="visible-xs img-responsive" src="headline-768px.jpg">   (128kb)
<img class="visible-sm img-responsive" src="headline-992px.jpg">   (144kb)
<img class="visible-md img-responsive" src="headline-1200px.jpg">  (264kb)
<img class="visible-lg img-responsive" src="headline-2000px.jpg">  (380kb)

拥有 4 个不同图像的主要目的是让移动设备不需要下载更大的版本。但是 Bootstrap 会预加载所有版本，无论屏幕大小如何，即使它们隐藏在当前断点处也是如此。对于每位观众来说，这相当于数百个不必要的 kb。

有解决办法吗？

Answer 1

问题演示:

Not all browsers react the same ，但通常浏览器将从 src 属性加载内容，而不管其他 CSS 规则是否将该元素呈现为不可见。

这是一个基准示例:

<img class="visible-xs img-responsive" src="http://placehold.it/768x150" />
<img class="visible-sm img-responsive" src="http://placehold.it/992x150" />
<img class="visible-md img-responsive" src="http://placehold.it/1200x150"/>
<img class="visible-lg img-responsive" src="http://placehold.it/2000x150"/>

Demo in jsFiddle

每当我刷新页面时，浏览器都会加载所有图像，甚至是最初不可见的图像:

背景图片+媒体查询

本教程 Simple Responsive Images With CSS Background Images更深入，但基本的解决方案是这样的:

创建一个简单的 div:

<div class="responsiveBackgroundImage" id="myImage" ></div>

然后根据屏幕尺寸插入正确的背景图片:

我们可能希望所有背景图像共享一些基本属性，如下所示:

.responsiveBackgroundImage { 
    width:100%;
    background-size: 100%;
    background-position: 50% 0%;
    background-repeat: no-repeat;
}   

然后在每个分辨率下替换此特定元素的 background-image 属性:

#myImage {background-image: url(http://placehold.it/768x150); }
@media (min-width: 768px)  { #myImage { background-image: url(http://placehold.it/992x150); }}
@media (min-width: 992px)  { #myImage { background-image: url(http://placehold.it/1200x150);}}
@media (min-width: 1200px) { #myImage { background-image: url(http://placehold.it/2000x150);}}

Demo in jsFiddle

用 Javascript 替换图片

由于使用背景图像的限制，您可能会决定使用真正的 img 元素，然后动态加载图像。您可以执行类似于 angular 使用 ng-src 执行的操作，而不是加载元素本身。在评估解析为 url 的表达式时。当浏览器加载每个元素时，它无法找到 src="{{personImageUrl}}" 的文件位置。相反，Angular 将预期的 url 保存为数据属性，然后在适当的时候加载。

首先，获取每张图片并在 src 属性前添加 data-。现在浏览器不会自动开始执行任何操作，但我们仍然可以使用这些信息。

<img class="visible-xs img-responsive" <b>data-</b>src="http://placehold.it/768x150"/>

然后查询我们最终要加载的所有动态图像。

$dynamicImages = $("[data-src]");

接下来，我们将要捕获窗口调整大小事件，并且在第一个页面加载时，我们将触发一个事件，以便我们可以使用相同的代码。使用这样的函数:

$(window).resize(function() {
    // Code Goes Here
}).resize();

然后检查每个动态图像是否可见。如果是这样，从数据属性加载图像并将其从数组中删除，这样我们就不必继续检查和加载它。

$dynamicImages.each(function(index) {
    if ($(this).css('display') !== 'none') {
        this.src = $(this).data('src');
        $dynamicImages.splice(index, 1)
    }
});

Demo in jsFiddle