停止下载不可见的内容

Question

我正在研究如何使用隐藏和可见类隐藏bootstrap 3中的元素但是已经注意到虽然内容是隐藏的，但当我达到指定的屏幕大小时，它仍然会被浏览器下载。

我没有在bootstrap中找到任何可以阻止未显示的内容被下载的内容，并且希望有Jquery Lazy Loader Library之类的内容可以阻止除下载图像之外的其他内容。

Answer 1

浏览器将始终下载img标记引用的图片，即使这些图片目前不可见。

如果这是一个问题，那么您需要在需要之前不要渲染这些标记。

这可能远远超出您的可能范围，但为了完整性，knockoutJS库实际上使if绑定变得容易：

<div data-bind="if: foo">
    <img> <!-- not rendered unless foo is truthy -->
</div>

Answer 2

我假设你正在讨论的事情会让移动设备（例如）下载不必要的图像文件，同时保持页面在桌面上完美呈现。

这就是我要做的事。

JS Fiddle

将示例显示区域（右下方框架）设置为小于480px，并在开发工具或Firefox版本中使用Chrome网络，以查看不下载。然后把它放大并重新运行并观察它。

CSS：

@media all and (max-width: 479px) {
    .hidden {
        display: none; /* **NOTE:** if bootstrap already does this for .hidden, maybe use opacity: 0 or max-width: 0, etc and adjust the jQuery accordingly */
    }
}

jQuery的：

$(function () {
    var $images = $('img.hidden');
    $.each($images, function () {
        if ($(this).css('display') != 'none') {
            $(this).attr('src', $(this).data('src'));
        }
    });
});

HTML：

<img id="thisImage" data-src="/path/to/image.png" class="hidden">

---

这将基本上为每个图像放置一个占位符，隐藏在它应该去的地方，而不是下载它，除非浏览器小于480px（根据您的偏好调整）。很常见的技巧。

PS - 如果您的网络浏览器是＆lt;加载页面时480px也无法下载。如果你想让我告诉你如何抵消这一点，请告诉我。