隐藏图片如何禁止加载？display none与图片加载的关系

说明：每个响应式网站开发都建议使用display:none CSS属性隐藏在移动浏览器上加载的内容，以便网站加载速度更快。那么问题来了网上有很多朋友在讨论即便是使用display:none来隐藏图片但依旧产生请求，并未能给移动端的访问减轻带宽压力，也许就是姿势不对。下面这篇内容帮大家整理display:none与图片加载的关系便于让我们的需求得以实现。

1、设置了display: none的元素，其背景和后代img元素都会产生请求，后代元素的背景不会产生请求，这些图片都不会被渲染。

<div class="outer" style="display: none; background: url(pic1.png);">
  <div class="inner" style="background: url(pic2.png)">
    <img src="pic3.png" alt="">
  </div>
</div>
// pic1和pic3发送请求了  pic2没有请求

2、重复图片、重复背景只会发送一次请求。

// 重复图片
<img src="pic1.png" alt="">
<img src="pic1.png" alt="">
// 重复背景
.test1 { background: url(pic1.png)) }   
.test2 { background: url(pic1.png) }  
// 发送一次请求

3、不存在的元素设置背景不会发送请求

// 页面中没有类名为test1的元素
.test1 { background: url(pic1.png) }
// 不会发送请求

4、设置了visibility: hidden的元素，其背景、后代img元素、后代元素的背景都会产生请求，且会渲染。

<div class="outer" style="visibility: hidden; background: url(pic1.png);">
  <div class="inner" style="background: url(pic2.png)">
    <img src="pic3.png" alt="">
  </div>
</div>
// pic1、pic2和pic3都发送了请求

5、多重背景的情况下，css3的多重背景方式，背景图片都会发送请求，非css3的多重背景方式，只有最后一个背景图片会发送请求。

// 非css3方式   只有pic2发送请求
.test1 { background: url(pic1.png); }   
.test1 { background: url(pic2.png); }
// css3方式   两个都发送请求
.test1 { background-image:url(pic1.png),url(pic2.png);

6、已经请求过的相同图片不会重复请求

可以通过默认图片/随机显示图片的策略来减少请求

7、js中的图片，如下，会进行加载

var img = new Image();
img.src = "./pic1.png";