JavaScript lazy loading detailed explanation
Lazy LoadingAs 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:
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 ღ( ´･ᴗ･` )
SummarizeThis 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:
|
<<: Web2.0: Causes and Solutions of Information Overload
>>: Detailed explanation of creating, calling and managing MySQL stored procedures
Recommend
How to install Nginx in CentOS7 and configure automatic startup
1. Download the installation package from the off...
Detailed example of changing Linux account password
Change personal account password If ordinary user...
Windows 2019 Activation Tutorial (Office2019)
A few days ago, I found that the official version...
Docker installation and configuration command code examples
Docker installation Install dependency packages s...
Summary of situations where MySQL indexes will not be used
Types of Indexes in MySQL Generally, they can be ...
HTML table markup tutorial (16): title horizontal alignment attribute ALIGN
By default, the table title is horizontally cente...
5 Commands to Use the Calculator in Linux Command Line
Hello everyone, I am Liang Xu. When using Linux, ...
A quick solution to the first login failure in mysql5.7.20
First, we will introduce how (1) MySQL 5.7 has a ...
Detailed explanation of how to use Docker-Compose commands
You can manage and deploy Docker containers in a ...
Mysql Sql statement exercises (50 questions)
Table name and fields –1. Student List Student (s...
Detailed explanation of Docker working mode and principle
As shown in the following figure: When we use vir...
Detailed explanation of MySQL joint query optimization mechanism
Table of contents MySQL federated query execution...
JavaScript to implement checkbox selection or cancellation
This article shares the specific code of JavaScri...
Vue implements a simple shopping cart example
This article example shares the specific code of ...
How to write object and param to play flash in firefox
Copy code The code is as follows: <object clas...