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

topdown-4405895_640.jpg

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";

相关推荐

  1. Typecho 启用 Service Workers 浏览器缓存加速首屏访问
  2. LNMP 编译安装 ngx_pagespeed 模块给网站提速！
  3. 60个CSS代码片段，前端的60个老大难问题！
  4. HTML如何实现页面自适应，适配手机屏幕尺寸
  5. typecho 模板 Handsome 主题美化教程
  6. 在 Apache/Nginx/IIS 启用ETag，提高访问速度
文章作者：喵斯基部落
原文地址：https://www.moewah.com/archives/3329.html
版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。非商业转载及引用请注明出处（作者、原文链接），商业转载请联系作者获得授权。