Table of contents:
- The meaning of lazy loading (why use lazy loading)
- principle
- Code
In the previous article, I introduced it to youJavaScript implements lazy loading of images (Lazyload).You can refer to it.
The meaning of lazy loading (why use lazy loading)
The most important impact on page loading speed is the picture. An ordinary picture can reach a size of several M, while the code may be only a few dozen KB. When there are many pictures of the page, the page loads slowly, and the page has not been loaded within a few minutes, and may lose many users.
Therefore, for pages with too many pictures, in order to speed up the page loading speed, we often need to not load the pictures that do not appear in the visual area on the page, and wait until they scroll to the visual area before loading. This will greatly improve the page loading performance and improve the user experience.
Point the img tag src in the page to a small image or src is empty, and then define the data-src (this property can be named in custom, so I use the data-src) attribute to point to the real image. src points to a default image, otherwise a request will be sent to the server when src is empty. Can point to the loading address.
Note: The image should specify the width and height
<img src="" data-src="/large/" />
When loading the page, first negatively define the data-src attribute value of the img tag in the visual area to src, and then listen for the scrolling event to load the picture that the user is about to see. This enables lazy loading.
Code
Before writing code, you need to understand various heights. Read this article first scrollTop, offsetTop, scrollLeft, offsetLeft
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img {
display: block;
margin-bottom: 50px;
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<img src="" data-src="/large/" alt="">
<img src="" data-src="/large/" alt="">
<img src="" data-src="/large/" alt="">
<img src="" data-src="/large/" alt="">
<img src="" data-src="/large/" alt="">
<img src="" data-src="/large/" alt="">
<img src="" data-src="/large/" alt="">
<img src="" data-src="/large/" alt="">
<img src="" data-src="/large/" alt="">
<img src="" data-src="/large/" alt="">
<img src="" data-src="/large/" alt="">
</body>
JavaScript
<script>
var num = ('img').length;
var img = ("img");
var n = 0; //Storing the location where the picture is loaded, avoiding traversing from the first picture every timelazyload(); //The page loads after loading, but the picture in the area is loaded = lazyload;
function lazyload() { // Listen to the page scroll eventvar seeHeight = ; //Visible area heightvar scrollTop = || ; //The scroll bar is from the top heightfor (var i = n; i < num; i++) {
if (img[i].offsetTop < seeHeight + scrollTop) {
if (img[i].getAttribute("src") == "") {
img[i].src = img[i].getAttribute("data-src");
}
n = i + 1;
}
}
}
</script>
jQuery
<script>
var n = 0,
imgNum = $("img").length,
img = $('img');
lazyload();
$(window).scroll(lazyload);
function lazyload(event) {
for (var i = n; i < imgNum; i++) {
if ((i).offset().top < parseInt($(window).height()) + parseInt($(window).scrollTop())) {
if ((i).attr("src") == "") {
var src = (i).attr("data-src");
(i).attr("src", src);
n = i + 1;
}
}
}
}
</script>
Performance optimization using throttling functions
If you bind the function directly to the scroll event, the function will be triggered at high frequency when the page is scrolled, which greatly affects the performance of the browser.
I want to implement limiting the trigger frequency to optimize performance.
Throttle function: Only one function is allowed to be executed once in N seconds. Here is a simple throttling function:
// Simple throttling function//Fun function to execute//delay delay//Time must be executed once within timefunction throttle(fun, delay, time) {
var timeout,
startTime = new Date();
return function() {
var context = this,
args = arguments,
curTime = new Date();
clearTimeout(timeout);
// If the specified trigger time interval is reached, trigger handlerif (curTime - startTime >= time) {
(context, args);
startTime = curTime;
// The trigger interval has not been reached, reset the timer} else {
timeout = setTimeout(fun, delay);
}
};
};
// Actually want to bind handler on scroll eventfunction lazyload(event) {}
// Use throttling function('scroll',throttle(lazyload,500,1000));
The above is the editor’s introduction to how JavaScript can achieve lazy loading (lazyload) and improve user experience (enhanced version). I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!