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

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

当前回答

** 2019回答**

在正常情况下显示:none不阻止图像被下载

/*will be downloaded*/

#element1 {
    display: none;
    background-image: url('https://picsum.photos/id/237/100');
}

但是如果一个祖先元素有display:none，那么后代的图像将不会被下载


/* Markup */

<div id="father">
    <div id="son"></div>
</div>


/* Styles */

#father {
    display: none;
}

/* #son will not be downloaded because the #father div has display:none; */

#son {
    background-image: url('https://picsum.photos/id/234/500');
}

其他阻止下载映像的情况:

1-目标元素不存在

/* never will be downloaded because the target element doesn't exist */

#element-dont-exist {
    background-image: url('https://picsum.photos/id/240/400');
}

2-两个相等的类加载不同的图像

/* The first image of #element2 will never be downloaded because the other #element2 class */

#element2 {
    background-image: url('https://picsum.photos/id/238/200');
}

/* The second image of #element2 will be downloaded */

#element2 {
    background-image: url('https://picsum.photos/id/239/300');
}

你可以在这里观看:https://codepen.io/juanmamenendez15/pen/dLQPmX

2019-04-24 19:43:06

其他回答

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

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

我们说的是图像不能在手机上加载，对吧?那么如果你只是做一个@media (min-width: 400px){background-image:thing.jpg}

那么，它难道不会只寻找超过一定屏幕宽度的图像吗?

2015-11-27 10:05:38

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

使用<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