Question

我正在尝试优化我的网站，以便在移动设备上显示效果。现在为了正确地执行此操作或看起来不错，我需要在移动视图的不同位置显示一个图像。

现在我在每个需要拥有相同图像的地方之一添加.hidden-xs和.visible-xs类。

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

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

Answer 1

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

Answer 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结尾），它们就会全部到位。值得注意的是，小图像将始终加载，这意味着在较大的屏幕上您将加载两者，但在更大的屏幕上应该更容易处理。

Bootstrap仍会加载隐藏的响应类吗？

2 个答案: