current position:Home>JavaScript - lazy loading

JavaScript - lazy loading

2022-01-27 01:26:55 Nanchen_ forty-two

Lazy loading

As the name suggests, I'm lazy , I don't want to load it all , When the user wants to see what I'm loading

Generalization :

Lazy loading is actually delayed loading , That is, load the object when it needs to be used .

Realization principle :

First of all, you have to have many first pictures to load , After loading, display the following required pictures

Step implementation :

1. load load picture
2. Determine which pictures to load
3. Load picture invisibly
4. Replace true picture

CSS style :

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

  Why are there two paths ? Because a img There is a real picture and a fake picture , We have to load with fake pictures first , Then replace with a real picture , The false picture in the figure below is on the left , True picture is on the right

script part :

    <script>
        let view = document.documentElement.clientHeight;// Get the height of the viewable area of the browser window 
        function fn1(){
            setTimeout(function lazyload() {    // Add a timer and start executing after one second 
            let imgs = document.querySelectorAll('img');    //  Get all img label 
            // console.log(imgs);
            for (let item of imgs) {                //  Use for-of Go through all the pictures 
                //  The display picture appears in the location of the browser 
                let rect = item.getBoundingClientRect();    //  Find the position of each picture on the visual area 
                console.log(rect);
                if (rect.bottom >= 0 && rect.top < view) {    // Give me one if Statement if the bottom of the picture is greater than 0 And smaller than the viewable area of the browser  , Just do the following 
                    item.src = item.getAttribute('data-original')    //  obtain data-original The path to img
                }
            }
        },1000)
        }
        fn1();
        document.addEventListener('scroll',fn1)    // When the scrolling event occurs, it starts to execute fn1 The task in the function 
    </script>

Why for-of without for-in perhaps for loop ? For details, please refer to ES6 in for-of What is gained

The effect is as follows : 

Complete 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/ picture  (1).jpeg">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/ picture  (3).jpeg"">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/ picture  (9).jpeg"">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/ picture  (10).jpg"">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/ picture  (13).jpeg"">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/ picture  (92).jpeg"">
        <img  src="image/load.gif" alt="" data-original="image/ picture  (1).jpg">
        <img  src="image/load.gif" alt="" data-original="image/ picture  (2).jpg">
        <img  src="image/load.gif" alt="" data-original="image/ picture  (19).jpg">
        <img  src="image/load.gif" alt="" data-original="image/ picture  (23).jpg">
        <img  src="image/load.gif" alt="" data-original="image/ picture  (33).jpg">
        <img  src="image/load.gif" alt="" data-original="image/ picture  (37).jpg">
        <img  src="image/load.gif" alt="" data-original="image/ picture  (38).jpg">
        <img  src="image/load.gif" alt="" data-original="image/ picture  (39).jpg">
        <img  src="image/load.gif" alt="" data-original="image/ picture  (40).jpg">
        <img  src="image/load.gif" alt="" data-original="image/ picture  (41).jpg">
        <img  src="image/load.gif" alt="" data-original="image/ picture  (42).jpg">
        <img  src="image/load.gif" alt="" data-original="image/ picture  (43).jpg">
        <img  src="image/load.gif" alt="" data-original="image/ picture  (44).jpg">
        <img  src="image/load.gif" alt="" data-original="image/ picture  (45).jpg">
        <img  src="image/load.gif" alt="" data-original="image/ picture  (46).jpg">
        <img  src="image/load.gif" alt="" data-original="image/ picture  (47).jpg">
        <img  src="image/load.gif" alt="" data-original="image/ picture  (48).jpg">
        <img  src="image/load.gif" alt="" data-original="image/ picture  (49).jpg">
        <img  src="image/load.gif" alt="" data-original="image/ picture  (50).jpg">
        <img  src="image/load.gif" alt="" data-original="image/ picture  (51).jpg">
        <img  src="image/load.gif" alt="" data-original="image/ picture  (52).jpg">
        <img  src="image/load.gif"alt="" data-original=" image/ picture  (53).jpg">
        <img  src="image/load.gif" alt="" data-original="image/ picture  (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) {
                //  The display picture appears in the location of 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>

  Attached below is the loading picture , Of course, you can find it yourself ( I think it's troublesome to find it myself   —.—), If other pictures also “ lazy ” If you find it yourself, you can do it privately. I'll sort it out and send it to you    ღ( ´・ᴗ・` )

copyright notice
author[Nanchen_ forty-two],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2022/01/202201270126534032.html

Random recommended