每个响应式网站开发教程都建议使用display:none CSS属性来隐藏移动浏览器加载的内容，这样网站加载得更快。这是真的吗?display:none不加载图像，还是在移动浏览器上加载内容?有没有什么方法可以防止在移动浏览器上加载不必要的内容?
当前回答
为了防止获取资源，使用Web Components的<template>元素。
其他回答
我们说的是图像不能在手机上加载，对吧?那么如果你只是做一个@media (min-width: 400px){background-image:thing.jpg}
那么，它难道不会只寻找超过一定屏幕宽度的图像吗?
如果是这样，有没有一种方法不加载不必要的内容在手机上 浏览器吗?
使用<img src="" srcset="">
http://www.webdesignerdepot.com/2015/08/the-state-of-responsive-images/
https://caniuse.com/#feat=srcset
怪癖模式:图像和显示:无
当图像有显示时:none或在元素with中 Display:none，浏览器可能会选择在显示之前不下载图像 设置为另一个值。 当您将显示切换为block时，只有Opera才能下载图像。 所有其他浏览器立即下载它。
浏览器似乎仍然下载图像，即使他们直接或间接隐藏的display: none属性。
我发现防止这种情况发生的唯一标准方法是使用img标签的loading属性:
<img src="https://cdn.test/img.jpg" loading="lazy">
除了Safari和Firefox Android，所有最新的浏览器都支持它。
MDN img加载属性规范。
另一种可能是使用<noscript>标记，并将图像放在<noscript>标记中。然后使用javascript删除noscript标签，因为你需要的图像。通过这种方式，您可以使用渐进增强按需加载图像。
使用我写的这个polyfill来读取IE8中<noscript>标签的内容
https://github.com/jameswestgate/noscript-textcontent
