背景圖片閃現空白問題

前言

那天天氣不錯，心情並不好，因爲感冒了。
實現前端一個彈出框功能時，發現有背景圖片的彈出框，會出現閃白現象。因爲心情不太好，我一直忍着。
直到今天， 研究一下解決方案，於是有了今天的文章。

這是一個很基礎的問題，也很常見的問題。 正常情況下我們都會忽視他。

總結

我===內容 & 你 === 背景圖片

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

最後

jpg有漸進式， png有交錯模式。
我們一起來看看效果。
演示： png正常，png交錯，jpg漸進