“display:none”是否阻止图像加载?

每个响应式网站开发教程都建议使用display:none CSS属性来隐藏移动浏览器加载的内容，这样网站加载得更快。这是真的吗?display:none不加载图像，还是在移动浏览器上加载内容?有没有什么方法可以防止在移动浏览器上加载不必要的内容?

当前回答

嗨，伙计们，我也在与同样的问题作斗争，如何不在移动设备上加载图像。

但我想到了一个好办法。首先创建一个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

2017-05-24 09:06:35

其他回答

嗨，伙计们，我也在与同样的问题作斗争，如何不在移动设备上加载图像。

<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的简单方法:)

查看这个代码依赖，以获得一个工作示例:http://codepen.io/fennefoss/pen/jmXjvo

2017-05-24 09:06:35

使用display:none with images的技巧是为它们分配一个id。这是不需要很多代码使其工作。下面是一个使用媒体查询和3个样式表的示例。一个用于手机，一个用于平板电脑，一个用于台式机。我有三张图片，手机，平板电脑和台式机的图片。在手机屏幕上只会显示手机的图像，平板电脑只会显示平板电脑的图像，桌面电脑则显示桌面电脑的图像。下面是一个代码示例，使其工作:

源代码:

<div id="content">
<img id="phone" src="images/phone.png" />
<img id="tablet" src="images/tablet.png" />
<img id="desktop" src="images/desktop.png" />
</div>

不需要媒体查询的手机CSS。是img#手机让它工作:

img#phone {
    display: block;
    margin: 6em auto 0 auto;
    width: 70%;
    }

img#tablet {display: none;}
img#desktop {display: none;}

平板css:

@media only screen and (min-width: 641px) {
img#phone {display: none;}

img#tablet {
    display: block;
    margin: 6em auto 0 auto;
    width: 70%;
    }
}

和桌面css:

@media only screen and (min-width: 1141px) {
img#tablet {display: none;}

img#desktop {
    display: block;
    margin: 6em auto 0 auto;
    width: 80%;
    }
}

祝你好运，并让我知道它是如何为你工作的。

2017-01-31 03:35:18

怪癖模式:图像和显示:无

当图像有显示时:none或在元素with中 Display:none，浏览器可能会选择在显示之前不下载图像设置为另一个值。当您将显示切换为block时，只有Opera才能下载图像。所有其他浏览器立即下载它。

2014-10-29 20:16:13

如果是这样，有没有一种方法不加载不必要的内容在手机上浏览器吗?

使用<img src="" srcset="">

http://www.webdesignerdepot.com/2015/08/the-state-of-responsive-images/

https://caniuse.com/#feat=srcset

2016-04-13 10:21:47

如果div设置为“display:none”，则会加载div元素的背景图像。

不管怎样，如果同一个div有一个父元素，并且父元素被设置为'display:none'，子元素的背景图像将不会加载。：）