Twitter bootstrap 引导减少页面重量

我将以下html作为网站的横幅图像：

<section>
    <div class="row">
        <div class="col-md-12 hidden-xs">
            <a href="/home"><img src="/images/header.jpg" alt="" width="1120" height="285" class="img-responsive"></a>
        </div>
        <div class="col-md-12 visible-xs center">
            <a href="/home"><img src="/images/header-xs.jpg" alt="" width="240" height="97"></a>
        </div>
    </div>
</section>

大标题图像为94kb。较小的图像为11kb

当我使用Firebug或Fiddler查看网络流量时，我发现无论浏览器大小，这两个图像都会被传输

---

是否可以仅在xs上传输小图像，而在非xs上仅传输大图像并保存数据传输？

在使用JS测量屏幕大小后，不动态加载图像。我会用更大的图像；以这种方式动态加载映像会适得其反，因为它会带来自身的性能问题，而94kb映像也不需要担心。在采取类似措施之前，您还应该采取许多其他步骤来优化站点的性能，因为这些步骤将更具影响力。这些步骤包括

优化图像

GZIP所有内容

利用浏览器缓存

此外，您可以使用类似的工具查看哪些方面可以改进

---

但是，如果必须，可以使用

$（window）.width（）

用于测量视口的宽度，下面的代码用于附加适当的图像

var img = $("<img />").attr('src', 'http://example/image.jpg')
    .load(function() {
        if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
            alert('broken image!');
        } else {
            $("#something").append(img);
        }
    });

---

在使用JS测量屏幕大小后，如果不动态加载图像，则无法执行此操作。我会用更大的图像；以这种方式动态加载映像会适得其反，因为它会带来自身的性能问题，而94kb映像也不需要担心。在采取类似措施之前，您还应该采取许多其他步骤来优化站点的性能，因为这些步骤将更具影响力。这些步骤包括

优化图像

GZIP所有内容

利用浏览器缓存

此外，您可以使用类似的工具查看哪些方面可以改进

---

但是，如果必须，可以使用

$（window）.width（）

用于测量视口的宽度，下面的代码用于附加适当的图像

var img = $("<img />").attr('src', 'http://example/image.jpg')
    .load(function() {
        if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
            alert('broken image!');
        } else {
            $("#something").append(img);
        }
    });

---

您可以使用CSS加载图像。（网络流量验证为仅在媒体中断时加载）

您需要检查浏览器兼容性。

在Chrome和Safari中工作正常。没有尝试firefox。在IE中无法使其工作

由于媒体查询更改，第二个图像在页面加载后10秒才加载

---

您可以使用CSS加载图像。（网络流量验证为仅在媒体中断时加载）

您需要检查浏览器兼容性。

在Chrome和Safari中工作正常。没有尝试firefox。在IE中无法使其工作

由于媒体查询更改，第二个图像在页面加载后10秒才加载

---

我认为Bootstrap没有什么好处。需要使用JSI，但我认为引导没有。两个响应都需要使用JSI，因为它们都有很好的解决方案/选项。我将制定一个使用这两种解决方案的功能的解决方案。我对两种回答都投了赞成票，因为它们都有很好的解决方案/选项。我将开发一个使用这两种解决方案的功能的解决方案。

/* xs */
 @media(max-width:767px) {
    section .visible-xs img {
        content: url("http://storyacious.com/wp-content/uploads/2014/02/300x300.gif");
    }
}
/* sm */
 @media(min-width:768px) {
    section .hidden-xs img {
        content: url("http://socialmediaseo.net/wp-content/uploads/2010/05/500px-android-logosvg-300x300.png");
    }
}