“This is the first day of my participation in the More Text Challenge. For details, see more text Challenge.”

1. Common phenomena of display

As many of us know, display allows elements to be hidden or displayed. Or make row-level elements block-level elements. The understanding of it is also more accurate. If an element uses display:none; The element will be hidden, unable to tap, and the screen Settings will be inaccessible. But here's my surprise: display: none; It's not as easy as we thought. It's a story property. Now let's look at what it has that we don't know about.Copy the code

2. When will display images not load in Chrome

If the parent element of the image or the image itself uses display: None, and the image is imported using background: URL (""), the image will not be requested and will not be loaded. If you don't believe me, take a look at the following broken codeCopy the code
<p> Display :none</p> <p> Use background: URL ("") </p> <p> Use background: URL ("") </p> <p> <div class="father ">< div class="bgimng"></div> </div>Copy the code
<style>
    .father-box {
        display: none;
    }

    .bgimng {
        background: url("img/bgg.png");
    }
</style>
Copy the code

According to the moving picture above. We found that refreshing the page really doesn't make network requests for images. We just said: display: none; There are two conditions for not making network requests on images: 1. Display: None on the parent element or the image itself; The background: URL ("") is used to insert the image. Let's check it out.Copy the code

3. Will the request be made without using the display image?

Use background: URL ("") to insert the image and see if the request is made. We found a network load on the imageCopy the code
<p style = "text-align: center; </p> <p> <p> Url (" ") insert the picture < / p > < p > picture on the network load < / p > < div class = "father - box" > < div class = "bgimng" > < / div > < / div >Copy the code
.bgimng {
    background: url("img/bgg.png");
}
Copy the code

4. Will the image be loaded on the network without using the background image?

Instead of using background: URL ("") to insert the image, use img tag. The image will then be web requested on all browsers. We can take a look at thatCopy the code
> <p> <p> <p> <p> <p> <p> <p> The image will then be web requested on all browsers. < / p > < p > will be network request < / p > < div class = "father - box" > < img SRC = ". / img/BGG. PNG "> < / div >Copy the code
<style>
    .bgimng {
        display: none;
    }
</style>
Copy the code

We know that images in web pages are inserted as background images. It is also displayed as an IMG tag. But they work with Dispaly to determine whether or not the image is loaded. Take advantage of their characteristics. So we can improve the performance of the site image.Copy the code