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

编程之家收集整理的这篇文章主要介绍了dispaly结合背景图片会提升加载性能编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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>

111使用.gif

根据上面的动态图片。
我们发现刷新页面确实不会对图片进行网络请求。
我们刚刚说: 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");
}

002.gif

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>

003.gif

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

总结

以上是编程之家为你收集整理的dispaly结合背景图片会提升加载性能全部内容,希望文章能够帮你解决dispaly结合背景图片会提升加载性能所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢寻找一群志同道合、互帮互助的学习伙伴,可以点击下方链接加入:
编程之家官方1群
编程之家官方2群
编程之家官方3群
编程之家官方4群

相关文章

猜你在找的CSS相关文章

有时,你需要修改第三方组件的CSS; 然而你直接修改是不可以的, 但是我们非要去修改第三方的组件; 此时可以使用==》深层选择器 &gt;&gt;&gt; /deep/ ::v-deep 可以帮助你。
CSS使用伪类给表单添加星号 &lt;style type=&quot;text/css&quot;&gt; .form-item label::before { content: &#39;*&#3
1.display的常见现象 我们很多人都知道,display可以让元素实现隐藏或者显示。 或者让行级元素变成块级元素。 对它的认识也是比较准确的。 如果一个元素使用了display:none; 那么
1.visibility: hidden/visible与dispaly:none 有些人简单的认为display: none;和visibility: hidden; 这两个属性的区别在于前者隐藏后
在hover时,i元素变成了块级元素; 导致这两个元素各自占了一行; 最终导致样式错乱; &lt;div class=&quot;demo&quot;&gt; &lt;!-- 添加图标 和 编辑图标
``` 保存 //按钮的字体色是白色.save-btn /deep/ span{ color: #fff;}.save-btn:hover{ background: #409EFF;}.save-bt
今天大家在浏览B站,腾讯视频,等网站时,有没有发现一个现象,网站变成灰色的了。 是不是跟平常不一样了呢,这是因为今天(2020.4.4)是全国哀悼日, 所以网站这些就变成灰色的呢。 我去看了一下腾讯的
重绘:当元素的一部分属性发生改变, 如背景、颜色等不会引起布局变化, 只需要浏览器根据元素的新属性重新绘制, 使元素呈现新的外观叫做重绘。 重排(回流):当render树中的一部分或者全部因为大小边距
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注