Twitter bootstrap 引导程序仍然会加载隐藏的响应类吗？

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

现在，我在需要相同图像的每个位置添加类.hidden xs和.visible xs

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

---

如果是这种情况，我该如何解决这个问题呢？

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

如果同一个文件加载两次，也不会有太大的区别（如果有的话）。作为示例，请参见这些

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

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

HTML:

---

如果你有正确命名的图像文件（以小和大结尾），一切都会正常进行。值得注意的是，小图像总是会被加载，这意味着在较大的屏幕上，两个图像都会被加载，但在较大的屏幕上，这应该更容易处理。

您确定有必要在页面上两次加载相同的图像吗？这样就不太容易维护了。您是否可以使用带有push和pull的grid类来调整移动设计的源代码顺序和布局？如果您发布一些代码，也许其他人可以提供更好的建议。

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

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