This is the first day of my participation in the Gwen Challenge in November. Check out the details: the last Gwen Challenge in 2021

Writing in the front

In fact, the skeleton screen is a kind of “alternative “loading animation. The difference lies in that the skeleton screen occupies space for various resources during resource loading, which is covered by actual resources after rendering, giving users a feeling that resources are gradually loaded and presented, making the loading process smooth. Loading is like a process from 0 to 1. A pile of data is suddenly displayed, and the loading process is abrupt.

This first introduces two ways to quickly achieve the skeleton screen (1: the use of picture switching to achieve the skeleton screen effect, 2: the use of CSS + HTML to achieve the skeleton screen effect), the implementation is simple, less code, suitable for some small projects.

1. Use picture switching to achieve

In this way, the loading effect is replaced by a picture with placeholder resources. When the data is loaded, the picture is replaced to achieve a “skeleton map” effect. This way is more troublesome UI colleagues, and it is also more troublesome to maintain, but less in the code, it is very convenient to implement.

1.1 Loading skeleton screen Image

This is because browsers load web resources in order: HTML, CSS and FONT have the highest priority. Then preload resources, JS scripts, XHR requests; Next are pictures, voice and video resources; The lowest is prefetch resources, because loading resources will block the page so we need to display images earlier to reduce the white screen time.

1.1.1 Use Preload to improve image loading priority

<link rel="preload" as="image" href="https://yuwuwu.oss-cn-beijing.aliyuncs.com/skeketon.gif">
Copy the code

The link element rel attribute preload enables the browser to preload the corresponding resource in the cache, and the AS attribute specifies the type of preloaded content. Can be preloaded as follows :(compatibility can I use)

  • Audio: audio files;
  • Document: a document to be embedded in<frame> 或 <iframe>The inside of theHTMLDocument;
  • Embed: A embed to be embedded into<embed>Resources within the element;
  • Fetch: Those that will passfetch 和 XHRRequest to obtain a resource, such as oneArrayBuffer 或 JSONFile;
  • Font: font file;
  • Image: an image file;
  • Object: one will be embedded into the<embed>The file within the element;
  • script: JavaScriptFile;
  • Style: style sheet;
  • track: WebVTTFile;
  • Worker: aJavaScript 的 web worker 或 shared worker;
  • A video file.

Browsers have concurrent limits on requests for the same domain name

1.1.2 Minimize the volume of images to speed up loading

  • Compress pictures, here recommend two I have been using compression software

Tinypng.com, an online photo compression site with almost lossless compression, now supports only 20 images at a time;

PpduckPP is a client compression software, the free version can only compress 10 pictures at a time, the advantage is that it can directly compress the picture in the original position.

  • Pictures turn base64

This scheme is suitable for small images, large volume images to base64 is too long, the page looks not beautiful.

1.2 Hide pictures after obtaining data

This is the same as turning off the loading animation. You only need to hide the image and show the real DOM element after the data is retrieved

2. CSS + HTML skeleton screen

This approach is to implement a skeleton screen element using CSS + HTML and replace the element when the data is loaded. Compared with the first solution, this solution is easier to maintain.

2.1 Implement a moving gradient effect animation

The linear-gradient() function creates an image with a linear gradient of color; Animation can bind animation properties to elements; @keyFrame can create an animation;

        .skeleton {
            background: #eee;
            background-image: linear-gradient(100deg.#eee 40%.#fff 50%.#eee 60%);
            animation: loading 2s ease infinite;
            background-size: 300% 100%;
        }

        @keyframes loading {
            0% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0 50%; }}Copy the code

2.2 Set the page frame under loading through the selector

This can be done by extracting the main skeleton module elements of the page, such as the image, title, and description as the skeleton of the page.

    <div class="box skeleton-box">
        <div class="item">
            <div class="item-left skeleton"></div>
            <div class="item-right">
                <p class="skeleton"></p>
                <p class="skeleton"></p>
            </div>
        </div>
        //...
    </div>
Copy the code

This gives you the basic skeleton of the page, just add the animation you’ve written above to the skeleton.

2.3 Hide the SKELETON screen DOM element after obtaining data

        $(".skeleton-box").hide()
        $(".box-list").show()
Copy the code

At the end

The full code can be seen on Github

Effect after realization: