背景图片闪白问题

栏目: CSS · 发布时间: 5年前

内容简介:那天天气不错,心情并不好,因为感冒了。实现前端一个弹出框功能时,发现有背景图片的弹出框,会出现闪白现象。因为心情不太好,我一直忍着。直到今天, 研究一下解决方案,于是有了今天的文章。

那天天气不错,心情并不好,因为感冒了。

实现前端一个弹出框功能时,发现有背景图片的弹出框,会出现闪白现象。因为心情不太好,我一直忍着。

直到今天, 研究一下解决方案,于是有了今天的文章。

这是一个很基础的问题,也很常见的问题。 正常情况下我们都会忽视他。

总结

我===内容 & 你 === 背景图片

  1. 我显示的时候,你已经在

  2. 若不能,我显示的时候,你尽快在

  3. 你尽可能的小

方案

可以到 背景图片闪现空白解决方案 看到各种方案演示。

方案1 base64

如果背景图片相对小,或者你执意要这嘛做,图片转为bas464,存到css或者html里面。

演示: 背景图片闪现空白方案-base背景图片

不足: base64占带宽啊!

方案2 prefetch

<link rel="prefetch" ></link>
<link rel="prefetch" href="./img/bg-huoluo.jpg"/>   


  .bg {
      background-image:url("./img/bg-huoluo.jpg");
      background-size: contain;
  }

prefetch是对浏览器的暗示,暗示将来可能需要某些资源,但由浏览器决定是否加载以及什么时候加载这些资源。 优先级低。

pre家族:preload, prefetch, dns-prefetch, preconnect, prerender。

有人可能会问,干嘛不用preload。 呵呵, 你说呢?

演示: 背景图片闪现空白方案-preferch

方案3: 创建隐藏Img节点

<img src="./img/bg-huoluo.jpg" alt="" title="" style="display: none"/>

 .bg {
     background-color: #2D2C27;
     background-image: url(./img/bg-huoluo.jpg);
     background-size: contain;
 }

这方案好理解,图片已经请求下载啦。 其实不能解决首屏背景图片的问题。

演示: 背景图片闪现空白方案-创建隐藏Img节点

方案4 等待图片加载完毕再显示弹框

let dg = null;
function createDialog() {

    onImageLoad('./img/bg-huoluo.jpg').then(src => {
        if (!dg) {
            dg = document.createElement('div');
            dg.className = "bg";
            dg.style.backgroundImage = `url(${src})`;
            dg.id = "dialog";
            dg.innerHTML = `
        <div class="content">我爱赫萝!!!!</div>
    `
            document.body.appendChild(dg);
        }
    })


}

function onImageLoad(src) {
    return new Promise((resolve, reject) => {
        let img = new Image();
        img.src = src;
        img.onload = function () {
            resolve(src)
        }
        img.onerror = reject
    })

}

当然这是有明显问题的,你不能因为一个背景图片而让内容无法正常展现。

当然你可以有修正方案。

演示: 背景图片闪现空白方案-等待图片加载完毕再显示弹框

方案5 同时设置背景颜色和图片

.bg {
    background-color:#433F34;
    background-size: contain;
}

.bg-new{
    background-image: url(./img/bg-huoluo.jpg)
}

这样,背景图片加载上的时候,不会有明显的闪白效果。 当然要是背景图片,五颜六色,估计有点为难客官啦。

演示: 背景图片闪现空白方案-同时设置背景颜色和图片

其他呢

再回头看看总结:

我===内容 & 你 === 背景图片

  1. 我显示的时候,你已经在

  2. 若不能,我显示的时候,你尽快在

  3. 你尽可能的小

那么:有下面的一些额外的话:

  • webp格式,减少图片大小
  • css spirte, 减少http开销
  • jpg格式图片压缩
  • 图片cdn
  • 多域名
  • 背景图片切割,能repeat就repeat

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Java数据结构和算法

Java数据结构和算法

拉佛 / 计晓云 / 中国电力出版社 / 2004-02-01 / 55.00元

《Java数据结构和算法》(第2版)以一种易懂的方式教授如何安排和操纵数据的问题,其中不乏一些难题:了解这些知识以期使计算机的应用获得最好的表现。不管使用何种语言或平台,掌握了数据结构和算法将改进程序的质量和性能。 《Java数据结构和算法》(第2版)提供了一套独创的可视讨论专题用以阐明主要的论题:它使用Java语言说明重要的概念,而避免了C/C++语言的复杂性,以便集中精力论述数据结构和算法。经......一起来看看 《Java数据结构和算法》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具