Young brother is not talented, he made a simple lazy load to save moneyWindow.onscrollNumber of times to improve performance, designed function throttling and function anti-shake two modes, think of a better way to update later, also ask your friends to give more pointers!!:D
Say nothing but code~~
1. Simple lazy loading:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img{
display: block;
max-height: 300px;
}
</style>
</head>
<body>
<div class="container">
<h1>Lazy loading page</h1>
<img src="1.png" data-src='1.jpg' alt="">
<img src="1.png" data-src='2.jpg' alt="">
<img src="1.png" data-src='3.jpg' alt="">
<img src="1.png" data-src='4.jpg' alt="">
<img src="1.png" data-src='5.jpg' alt="">
<img src="1.png" data-src='6.jpg' alt="">
<img src="1.png" data-src='7.jpg' alt="">
<img src="1.png" data-src='8.jpg' alt="">
<img src="1.png" data-src='9.jpg' alt="">
</div>
</body>
</html>
<script>
var scrollTop = window.scrollY;
var imgs = Array.from(document.querySelectorAll('img'));
lazyLoad();
window.onscroll = () => {
scrollTop = window.scrollY;
lazyLoad();
}
function lazyLoad(){
imgs.forEach((item,index)=>{
if( item.offsetTop < window.innerHeight + scrollTop ){
console.log(item.offsetTop)
item.setAttribute('src',item.dataset.src)
}
})
}
</script>There are pits to pay attention to!!! And this problem is not good for Baidu -. -
If you copy the above code, the first time you load the page, you will find that all the pictures have been loaded, without the effect of lazy loading.
Because when a function is calledImg.onloadNot done, img element has no height!!!
The solution is to wrap one on the outsideWindow.onload
window.onload = function(){
lazyLoad();
}2. Function Throttle Lazy Loading
Recommended!!! In high frequency scrolling mode, rendering is only possible at regular intervals ~~
window.onload = function(){
var scrollTop = window.scrollY;
var imgs = Array.from(document.querySelectorAll('img'));
lazyLoad();
//Function Throttle Mode
var canRun = true;
window.onscroll = () => {
if( !canRun ){
return
}
canRun = false;
setTimeout(()=>{
scrollTop = window.scrollY;
lazyLoad();
canRun = true;
},1000)
}
function lazyLoad(){
imgs.forEach((item,index)=>{
if( item.offsetTop < window.innerHeight + scrollTop ){
console.log(item.offsetTop)
item.setAttribute('src',item.dataset.src)
}
})
}
}3. Function anti-shake
It is not recommended to use ~~~for mobile number verification and mailbox verification at the time of user registration.Only after the user has finished typing, the front end needs to check if the format is correct, and if not, pop up the prompt.Here's another example of scrolling through page elements
Effect: No pictures will be loaded when sliding all the time, 300 ms after stopping
window.onload = function(){
var scrollTop = window.scrollY;
var imgs = Array.from(document.querySelectorAll('img'));
lazyLoad();
//Function anti-shake mode
var timer = null;
window.onscroll = () => {
clearInterval(timer);
timer = setTimeout(()=>{
scrollTop = window.scrollY;
lazyLoad();
},300)
}
function lazyLoad(){
imgs.forEach((item,index)=>{
if( item.offsetTop < window.innerHeight + scrollTop ){
console.log(item.offsetTop)
item.setAttribute('src',item.dataset.src)
}
})
}
}