每个响应式网站开发教程都建议使用display:none CSS属性来隐藏移动浏览器加载的内容，这样网站加载得更快。这是真的吗?display:none不加载图像，还是在移动浏览器上加载内容?有没有什么方法可以防止在移动浏览器上加载不必要的内容?
当前回答
如果div设置为“display:none”，则会加载div元素的背景图像。
不管怎样，如果同一个div有一个父元素，并且父元素被设置为'display:none'，子元素的背景图像将不会加载。：）
使用bootstrap的示例:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <div class="col-xs-12 visible-lg"> <div style="background-image: url('http://via.placeholder.com/300x300'); background-repeat:no-repeat; height: 300px;">lg</div> </div> <div class="col-xs-12 visible-md"> <div style="background-image: url('http://via.placeholder.com/200x200'); background-repeat:no-repeat; height: 200px;">md</div> </div> <div class="col-xs-12 visible-sm"> <div style="background-image: url('http://via.placeholder.com/100x100'); background-repeat:no-repeat; height: 100px">sm</div> </div> <div class="col-xs-12 visible-xs"> <div style="background-image: url('http://via.placeholder.com/50x50'); background-repeat:no-repeat; height: 50px">xs</div> </div>
其他回答
嗨，伙计们，我也在与同样的问题作斗争，如何不在移动设备上加载图像。
但我想到了一个好办法。首先创建一个img标签，然后在src属性中加载一个空白的svg。现在，您可以将图像的URL设置为内联样式的content: URL('链接到您的图像');。现在用你选择的包装包装你的img标签。
<div class="test">
<img src="data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22/%3E" style="content:url('https://blog.prepscholar.com/hubfs/body_testinprogress.gif?t=1495225010554')">
</div>
@media only screen and (max-width: 800px) {
.test{
display: none;
}
}
将包装器设置为在不希望加载图像的断点上不显示任何内容。img标记的内联css现在被忽略，因为包装器中没有显示的元素的样式将被忽略，因此图像不会被加载，直到到达包装器有显示块的断点。
好了，在移动断点上不加载img的简单方法:)
查看这个代码依赖，以获得一个工作示例:http://codepen.io/fennefoss/pen/jmXjvo
怪癖模式:图像和显示:无
当图像有显示时:none或在元素with中 Display:none，浏览器可能会选择在显示之前不下载图像 设置为另一个值。 当您将显示切换为block时，只有Opera才能下载图像。 所有其他浏览器立即下载它。
我们说的是图像不能在手机上加载，对吧?那么如果你只是做一个@media (min-width: 400px){background-image:thing.jpg}
那么，它难道不会只寻找超过一定屏幕宽度的图像吗?
另一种可能是使用<noscript>标记，并将图像放在<noscript>标记中。然后使用javascript删除noscript标签，因为你需要的图像。通过这种方式，您可以使用渐进增强按需加载图像。
使用我写的这个polyfill来读取IE8中<noscript>标签的内容
https://github.com/jameswestgate/noscript-textcontent
为了防止获取资源，使用Web Components的<template>元素。
