Bootstrap 还会加载隐藏的响应类吗？答案

【问题标题】：Will Bootstrap still load hidden responsive classes?Bootstrap 还会加载隐藏的响应类吗？
【发布时间】：2014-05-29 10:00:43
【问题描述】：

我正在尝试优化我的网站，使其在移动设备上也能很好地显示。现在，为了正确执行此操作或使其看起来不错，我需要在移动视图的不同位置显示例如图像。

现在我将 .hidden-xs 和 .visible-xs 类添加到需要相同图像的每个位置之一。

问题是，既然我现在从数据库中调用图像两次，我的浏览器加载页面会变慢吗？

如果是这样，那我该如何解决这个问题呢？

【问题讨论】：

您确定需要在页面上出现两次相同的图像吗？这种方式的可维护性较差。您可以使用带有推拉功能的网格类来调整移动设计的源顺序和布局吗？如果您发布一些代码，也许其他人可以提供更好的建议。

标签： twitter-bootstrap mobile responsive-design twitter-bootstrap-3 hidden

【解决方案1】：

是的，两个图像都将被加载，因此即使您使用响应式类，加载页面也可能需要更长的时间。一种可能的解决方案是通过 css 将图像加载为背景图像，每个大小的图像在不同的媒体查询中。也有 javascript 解决方案。

【讨论】：

【解决方案2】：

如果同一个文件被加载两次，它不会有太大的区别，如果有的话。例如，请参阅这些example1、example2。

编辑：我最初只是提到下面的 javascript 选项，但我很好奇，现在在回答 here 的帮助下为它制定了一个解决方案：

如果加载了两个不同的文件，一些仅在需要时加载较大文件的 javascript 会降低您的移动加载时间：Example

HTML：

<div class="visible-sm">
  <img src="...example-image_small.jpg" />
</div>
...
<div class="hidden-sm">
  <img src="...example-image_small.jpg" />
<div>

Javascript：

if ($(window).width() > 767) {
    $("img[src$='_small.jpg']").each(function() {
        var new_src = $(this).attr("src").replace('_small', '_large'); 
        $(this).attr("src", new_src); 
    });
}

如果您有正确命名的图像文件（以 _small 和 _large 结尾），那么一切都会到位。值得注意的是，小图像总是会加载，这意味着在更大的屏幕上您将同时加载两者，但在更大的屏幕上应该更容易处理。

【讨论】：