This is the 8th day of my participation in the August More text Challenge. For details, see: August More Text Challenge.

preface

About the SSD series: Some interesting content on the front end, aimed at 3-10 minutes, 500-1500 words, gain without being burdened.

One day, found a background picture of the pop-up box, will appear white phenomenon, this, brothers, you say can endure?

Answer: No!

Train of thought

There are three ways of thinking

  1. The background image is ready when the frame is displayed or displayed

  2. Background color or small image, first on the top, large background ready after the switch

  3. As soon as possible

Forget about caching, because you can’t escape the first load anyway.

plan

You can go to the background image flash blank solution to see the various solutions demonstrated.

To boost your interest, let’s take a look at the GIF of the PNG, JPG increments and PNG interleaved loading effects:

For mobile viewing, make a list of demos:

  • Background image flash blank scheme – Base background image
  • Background image flash blank scheme -preferch
  • Background Image flash blank scheme – Create hidden Img node
  • Background image flash blank – Wait for the image to load before displaying the popup
  • Background Image flash blank scheme – Set both background color and image
  • PNG normal, PNG interleaved, JPG progressive

Plan 1 base64

If the background image is relatively small, or if you really want it, convert the image to BAS464 and save it to CSS or HTML. Demo: Background image flash blank scheme – Base background image

The downside: Base64 increases bandwidth costs and content is at least 1/3 larger than it would otherwise be. See the front end of Base64 coding for why, an article to explore the origins, the pursuit of truth.

Scheme 2 prefetch

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


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

Prefetch is a hint to the browser that certain resources may be needed in the future, but it is up to the browser to decide if and when to load them. The priority is low. Pre family: Preload, Prefetch, DNS-prefetch, Preconnect, PRERender. One might ask why not use preload. Hehe, what do you think? Demo: background image flash blank scheme -preferch

Scenario 3 creates a hidden Img node

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

Copy the code

This scheme is easy to understand, the picture has requested to download. It doesn’t solve the first screen background image problem. Demo: Background image flash blank scheme – Create hidden Img node

Solution 4 Wait until the image is loaded before displaying the pop-up

        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 = '
      

        I love Helo!!!! 
      
 `
                    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
            })

        }
Copy the code

There are obvious problems with this, of course. You can’t have a background image and your content will not work properly. Of course you can have a fix. Demo: Background image flash blank scheme – wait for the image to load before displaying the pop-up

Scenario 5 sets both the background color and the image

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

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

This way, when the background image is loaded, there will be no obvious flickering effect. Of course, if the background picture, colorful, estimate a little difficult guest.

Demo: Background image flash blank scheme – set background color and image simultaneously

Scenario 6 uses progressive mode for JPG and interlaced mode for PNG

What these two modes do together is that you don’t have to complete the download to see the content of the image.

For example, with 1 MB of images, you may need to download less than 100 kilobytes to see the images relatively clearly.

Demo: PNG normal, PNG interleaved, JPG progressive

Scheme 7 small diagram transition scheme

Display loading picture or small picture, and change the large picture after completion. This kind of scheme common language cover, commodity icon and so on scene, background picture can also draw lessons from its train of thought.

Other schemes can be referenced

  • Webp format to reduce image size
  • CSS Spirte, reduces HTTP overhead, while making it easier to load CSS Spirte + Prefech
  • JPG image compression
  • Picture the CDN
  • Many of the domain name
  • Background picture cutting, can repeat repeat

summary

Is not very simple, everything looks not so difficult, so, you can easily into the pit ah.

Write in the last

Writing is not easy, your praise and comments are the biggest motivation for me to move forward.