Background image flashed white issue

Foreword

The weather was good, the mood is not good, because of a cold.
When implementing front-end features a pop-up box, found background image pop-up box will flash white phenomenon. Because the mood is not very good, I have been endured.
Even today, look at the solution, so with today's article.

This is a very basic question, but also a very common problem. Under normal circumstances we would ignore him.

to sum up

I === === your content & background image

1. When I show you already

2. If not, when I show you as soon as possible

3. You as small as possible

Program

You can go to the background image flashed Blank Solution to see the demo programs.

Scheme 1 base64

If the background image is relatively small, or you insist on doing this thing, the picture turned bas464, html or css to keep inside.
Demo: background image flashed white background image -base program

Inadequate: base64 accounted bandwidths ah!

Scheme 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 is a hint to the browser, suggesting that in the future may require some resources, but the decision by the browser is loaded and when they are loaded. Low priority.
pre family: preload, prefetch, dns-prefetch , preconnect, prerender.
One might ask, why do not preload. Oh, you say?
Demo: background image flashed white scheme -preferch

Scenario 3: create a hidden node 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;
    }

This program is easy to understand, the picture has requested to download it. In fact, not solve the problem first screen background image.
Demo: background image flashed white scheme - create a hidden node Img

Scenario 4 is loaded and then wait for the picture frame display shells

        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
            })

        }

Of course, this is a significant problem, because you can not make a background image and content can not show properly.
Of course, you can have amendments to the program.
Demo: background image flashed white scheme - waiting picture is loaded and then displays the popup box

5 program and set background colors and images

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

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

In this way, the background image is loaded, it does not have a significant effect white flash. Of course, if the background image, colorful, a bit difficult to estimate Keguan friends.

Demo: background image flashed white scheme - and set a background color and pictures

The others

Then look back Summary:
I === === your content & background image

1. When I show you already

2. If not, when I show you as soon as possible

3. You as small as possible

So: There are some of the following additional words:

• webp format, reducing the image size
• css spirte, reduce overhead http
• jpg picture compression format
• Pictures cdn
• Multi-domain
• Background image cutting, can you repeat repeat

At last

There are progressive jpg, png have interlaced mode.
We take a look at the results.
Demos: PNG normal, png staggered, jpg progressive