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
Summary of MySQL 8.0 memory-related parameters
Theoretically, the memory used by MySQL = global ...
CSS eight eye-catching HOVER effect sample code
1. Send effect HTML <div id="send-btn&quo...
Discussion on default margin and padding values of common elements
Today we discussed the issue of what the margin v...
Solution to the problem of not being able to obtain the hostname of the host in the docker container
The test is passed in the nodejs environment. The...
Vue implements websocket customer service chat function
This article mainly introduces how to implement a...
Example of implementing QR code scanning effects with CSS3
Online Preview https://jsrun.pro/AafKp/ First loo...
How to implement email alert in zabbix
Implemented according to the online tutorial. zab...
Detailed explanation of basic operation commands for Linux network settings
Table of contents View network configuration View...
Vue binding object, array data cannot be dynamically rendered case detailed explanation
Project scenario: Dark Horse Vue project manageme...
Solution to the problem of stuck when clicking Select All in Element's shuttle box with large amount of data
Table of contents Solution 1: Copy the transfer c...
Detailed explanation of dynamic Christmas tree through JavaScript
Table of contents 1. Animated Christmas Tree Made...
Linux system (Centos6.5 and above) installation jdk tutorial analysis
Article Structure 1. Preparation 2. Install Java ...
Detailed explanation of top command output in Linux
Preface I believe everyone has used the top comma...
Implementation script for scheduled database backup in Linux
Table of contents Scenario: The server database n...
Gogs+Jenkins+Docker automated deployment of .NetCore steps
Table of contents Environmental Description Docke...