dispaly结合背景图片会提高加载性能

“这是我参与更文挑战的第1天，活动详情查看： 更文挑战”

1.display的常见现象

咱们不少人都知道，display能够让元素实现隐藏或者显示。
或者让行级元素变成块级元素。
对它的认识也是比较准确的。
若是一个元素使用了display:none;
那么该元素将会隐藏，没法进行点击，屏幕设置将会没法访问。
可是今天个人意外发现， display: none;并非咱们想象的那样简单。
它是一个有"故事的属性"
如今咱们来看一看它究竟有哪些咱们不知道的现象。
复制代码

2. 在谷歌浏览器中什么状况使用 display 图片不会进行加载

若是图片的父级元素或者图片自己使用了display:none，
而且图片使用background:url("")的方式引入图片
那么图片将不会进行网络请求，也就不会进行加载。
不信的话能够来看一下下面这一段断码
复制代码

<p> 若是图片的父级元素或者图片自己使用了display:none</p>
<p> 使用background:url("")这样的方式引入图片</p>
<p> 那么图片将不会进行网络请求，也就不会进行加载</p>
<div class="father-box">
    <div class="bgimng"></div>
</div>
复制代码

<style>
    .father-box {
        display: none;
    }

    .bgimng {
        background: url("img/bgg.png");
    }
</style>
复制代码

根据上面的动态图片。
咱们发现刷新页面确实不会对图片进行网络请求。
咱们刚刚说： display: none;
不会对图片进行网络请求有两个条件
条件1：父级元素或者图片自己使用display: none;
条件2：图片以background: url("") 的方式插入图片
这两个条件是缺一不可的。
不信咱们来一一验证。
复制代码

3.不使用display图片会进行请求吗?

图片不使用display(这样就不符合条件1)
图片依旧使用background: url("") 的方式插入图片(符合条件2)
看看是否会进行网络请求。
咱们发现对图片进行了网络加载
复制代码

<p>图片不使用display；</p>
<p>这样就不符合条件1</p>
<p> 图片依旧使用background: url("") 的方式插入图片</p>
<p> 图片进行了网络加载</p>
<div class="father-box">
    <div class="bgimng"></div>
</div>
复制代码

.bgimng {
    background: url("img/bgg.png");
}
复制代码

4.不使用背景图的方式插入图片会进行网络加载吗？

图片不是以background: url("") 的方式插入图片
而是以img标签的方式。那么图片将会在全部的浏览器上被进行网络请求。
咱们能够来看一下
复制代码

<p>图片图片不是以background: url("") 的方式插入图片</p>
<p>而是以img标签的方式。那么图片将会在全部的浏览器上被进行网络请求。</p>
<p>会进行网络请求</p>
<div class="father-box">
    <img src="./img/bgg.png">
</div>
复制代码

<style>
    .bgimng {
        display: none;
    }
</style>
复制代码

咱们知道在网页中显示图片有以背景图的方式插入。
还有以img标签的形式进行展现。
可是他们配合dispaly会产生是否对图片进行加载。
利用他们这样特征。
那么咱们能够对网站图片进行性能上的提高。
复制代码