JavaScript lazy loading detailed explanation

JavaScript lazy loading detailed explanation

Lazy Loading

As the name suggests, I am lazy and don't want to load all the content. When the user wants to see what I am loading later,

Summary: Lazy loading is actually delayed loading, that is, loading the object when it is needed.

Implementation principle:

First you need to have many first pictures to load, and after loading is complete, display the pictures required later

Steps to achieve:

1. Load the image
2. Determine which images to load
3. Invisible loading pictures
4. Replace the real picture

CSS styles:

    <style>
        img {
            width: 400px;
            height: 300px;
            display: block;
        }
        .row{
            width: 300px;
            height: 400px;
        }
    </style>

HTML part:

  <img class="rwo" src="image/load.gif" alt="" data-original="image/图片(1).jpeg">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/图片(3).jpeg"">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/图片(9).jpeg"">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/图片(10).jpg"">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/图片(13).jpeg"">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/图片(92).jpeg"">
        <img src="image/load.gif" alt="" data-original="image/图片(1).jpg">
        <img src="image/load.gif" alt="" data-original="image/图片(2).jpg">
        <img src="image/load.gif" alt="" data-original="image/图片(19).jpg">
        <img src="image/load.gif" alt="" data-original="image/图片(23).jpg">
        <img src="image/load.gif" alt="" data-original="image/图片(33).jpg">
        <img src="image/load.gif" alt="" data-original="image/图片(37).jpg">
        <img src="image/load.gif" alt="" data-original="image/图片(38).jpg">
        <img src="image/load.gif" alt="" data-original="image/图片(39).jpg">
        <img src="image/load.gif" alt="" data-original="image/图片(40).jpg">
        <img src="image/load.gif" alt="" data-original="image/图片(41).jpg">
        <img src="image/load.gif" alt="" data-original="image/图片(42).jpg">
        <img src="image/load.gif" alt="" data-original="image/图片(43).jpg">
        <img src="image/load.gif" alt="" data-original="image/图片(44).jpg">
        <img src="image/load.gif" alt="" data-original="image/图片(45).jpg">
        <img src="image/load.gif" alt="" data-original="image/图片(46).jpg">
        <img src="image/load.gif" alt="" data-original="image/图片(47).jpg">
        <img src="image/load.gif" alt="" data-original="image/图片(48).jpg">
        <img src="image/load.gif" alt="" data-original="image/图片(49).jpg">
        <img src="image/load.gif" alt="" data-original="image/图片(50).jpg">
        <img src="image/load.gif" alt="" data-original="image/图片(51).jpg">
        <img src="image/load.gif" alt="" data-original="image/图片(52).jpg">
        <img src="image/load.gif"alt="" data-original=" image/图片(53).jpg">
        <img src="image/load.gif" alt="" data-original="image/图片(54).jpg">

Why are there two paths? Because there is a real picture and a fake picture in an img, we have to load the fake picture first, and then replace it with the real picture. In the figure below, the fake picture is on the left and the real picture is on the right

Script part:

    <script>
        let view = document.documentElement.clientHeight; //Get the height of the browser window visible area function fn1(){
            setTimeout(function lazyload() { //Add a timer to start execution after one second let imgs = document.querySelectorAll('img'); // Get all img tags // console.log(imgs);
            for (let item of imgs) { // Use for-of to iterate over all images // Display the position of the image in the browser let rect = item.getBoundingClientRect(); // Find the position of each image in the visible area console.log(rect);
                if (rect.bottom >= 0 && rect.top < view) { //Give an if statement if the bottom of the image is greater than 0 and smaller than the visible area of ​​the browser, do the following item.src = item.getAttribute('data-original') //Get the path of data-original and pass it to img
                }
            }
        },1000)
        }
        fn1();
        document.addEventListener('scroll',fn1) //When a scroll event occurs, the task in the fn1 function will be executed</script>

Why use for-of instead of for-in or for loop? For details, please refer to what for-of in ES6 obtains

The effect is as follows:

Full code:

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lazy Loading</title>
    <style>
        img {
            width: 400px;
            height: 300px;
            display: block;
        }
        .row{
            width: 300px;
            height: 400px;
        }
    </style>
</head>
<body>
        <img class="rwo" src="image/load.gif" alt="" data-original="image/图片(1).jpeg">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/图片(3).jpeg"">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/图片(9).jpeg"">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/图片(10).jpg"">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/图片(13).jpeg"">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/图片(92).jpeg"">
        <img src="image/load.gif" alt="" data-original="image/图片(1).jpg">
        <img src="image/load.gif" alt="" data-original="image/图片(2).jpg">
        <img src="image/load.gif" alt="" data-original="image/图片(19).jpg">
        <img src="image/load.gif" alt="" data-original="image/图片(23).jpg">
        <img src="image/load.gif" alt="" data-original="image/图片(33).jpg">
        <img src="image/load.gif" alt="" data-original="image/图片(37).jpg">
        <img src="image/load.gif" alt="" data-original="image/图片(38).jpg">
        <img src="image/load.gif" alt="" data-original="image/图片(39).jpg">
        <img src="image/load.gif" alt="" data-original="image/图片(40).jpg">
        <img src="image/load.gif" alt="" data-original="image/图片(41).jpg">
        <img src="image/load.gif" alt="" data-original="image/图片(42).jpg">
        <img src="image/load.gif" alt="" data-original="image/图片(43).jpg">
        <img src="image/load.gif" alt="" data-original="image/图片(44).jpg">
        <img src="image/load.gif" alt="" data-original="image/图片(45).jpg">
        <img src="image/load.gif" alt="" data-original="image/图片(46).jpg">
        <img src="image/load.gif" alt="" data-original="image/图片(47).jpg">
        <img src="image/load.gif" alt="" data-original="image/图片(48).jpg">
        <img src="image/load.gif" alt="" data-original="image/图片(49).jpg">
        <img src="image/load.gif" alt="" data-original="image/图片(50).jpg">
        <img src="image/load.gif" alt="" data-original="image/图片(51).jpg">
        <img src="image/load.gif" alt="" data-original="image/图片(52).jpg">
        <img src="image/load.gif"alt="" data-original=" image/图片(53).jpg">
        <img src="image/load.gif" alt="" data-original="image/图片(54).jpg">
    <script>
        let view = document.documentElement.clientHeight;
        function fn1(){
            setTimeout(function lazyload() {
            let imgs = document.querySelectorAll('img');
            // console.log(imgs);
            for (let item of imgs) {
                // Display the image's position in the browser let rect = item.getBoundingClientRect();
                console.log(rect);
                if (rect.bottom >= 0 && rect.top < view) {
                    item.src = item.getAttribute('data-original')
                }
            }
        },1000)
        }
        fn1();
        document.addEventListener('scroll',fn1)
    </script>
</body>
 
</html>

The loading pictures are attached below. Of course, you can also find them by yourself (I think it’s troublesome to find them by yourself —.—). If you are too lazy to find other pictures by yourself, you can send me a private message and I will sort them out and send them to you ღ( ´･ᴗ･` )

Summarize

This article ends here. I hope it can be helpful to you. I also hope that you can pay more attention to more content on 123WORDPRESS.COM!

You may also be interested in:
  • Native JS to achieve lazy loading of pictures and page performance optimization
  • JavaScript waterfall image lazy loading example analysis and optimization
  • JS implements lazy loading of page data
  • Detailed explanation of optimization methods for lazy loading of JavaScript images

<<:  Web2.0: Causes and Solutions of Information Overload

>>:  Detailed explanation of creating, calling and managing MySQL stored procedures

Recommend

Detailed explanation of common methods of JavaScript Array

Table of contents Methods that do not change the ...

Practical MySQL + PostgreSQL batch insert update insertOrUpdate

Table of contents 1. Baidu Encyclopedia 1. MySQL ...

Negative distance (empathy) - iterative process of mutual influence

Negative distance refers to empathy. Preface (rai...

Native JS realizes uniform motion of various sports

This article shares with you a uniform motion imp...

Detailed explanation of the solution to npm ls errors caused by fsevents module under Linux

There is a project developed on Mac, and the pack...

Redission-tomcat quickly implements deployment from single machine to multi-machine deployment

Preface In the early stages of some projects, dev...

Detailed explanation of the perfect integration solution between Serv-U FTP and AD

I logged into the backend to check the solution t...

mysql5.7.17.msi installation graphic tutorial

mysql-5.7.17.msi installation, follow the screens...

What does href=# mean in a link?

Links to the current page. －－－－－－－－－－－－－－－－－－－ Com...

We're driving IE6 to extinction on our own

In fact, we wonder every day when IE6 will really...

Centos6.9 installation Mysql5.7.18 step record

Installation sequence rpm -ivh mysql-community-co...

Getting Started with Mysql--sql execution process

Table of contents 1. Process 2. Core Architecture...

Solution to the problem of web page flash animation not displaying

<br />The solution steps are as follows: Sta...

Summary of three rules for React state management

Table of contents Preface No.1 A focus No.2 Extra...

Installation tutorial of mysql 8.0.11 compressed version under win10

This article shares the installation tutorial of ...