Why lazy loading
Sometimes there will be a lot of pictures in the page, an image means an HTTP request, a JS file tens of K, a picture may be several M, too many pictures need a long loading time, after the completion of the loading of pictures, people have gone cold, lazy loading of pictures has a significant effect on improving user experience
Lazy loading principle
PNG =’default. PNG ‘. Add data-src(custom attribute) to point to the url of the real image
<img src='default.png' data-src='httt://www.xxx.com/images/001.jpg'>
Copy the code
Listen for scroll event, when the image appears in the viewable area, extract the value of data-src and assign it to SRC to load the real image
The implementation code
let img = document.getElementsByTagName('img') // Set the starting image for each iteration to prevent repeated loadingletLazyLoad () window.onscroll = lazyLoadfunction lazyLoad() {
let seeHeight = document.documentElement.clientHeight
let scrollHeight = document.body.scrollHeight
for (leti = n; i<img.length; i++) {if(img[i].src === 'default.png') {if(img[i].offsetHeight < seeHeight + scrollHeight){
img[i].setAttribute('src',img[i].getAttribute('data-src'))
n++
}
}
}
}
Copy the code
That’s not all. LazyLode binding to the Scorll event causes high frequency triggering, which only increases browser stress and defeats our purpose, so we need to limit the event frequency
let img = document.getElementsByTagName('img') // Set the starting image for each iteration to prevent repeated loadingletLazyLoad ()function lazyLoad() {
let seeHeight = document.documentElement.clientHeight
let scrollHeight = document.body.scrollHeight
for (leti = n; i<img.length; i++) {if(img[i].src === 'default.png') {if(img[i].offsetHeight < seeHeight + scrollHeight){
img[i].setAttribute('src',img[i].getAttribute('data-src') n++}}}} //function debounce(fn,wait) {
let timeout = null
return function() {let context = this
let args = arguments
clearTimeout(timeout)
timeout = setTimeout( function(){
fn.apply(context,args)
},wait)
}
}
window.addEventListener('scroll',debounce(lazyLoad,800),true)
Copy the code
The debounce function limits the trigger frequency of lazyLoad. If the scroll time is triggered again within the 800ms wait time, the time will be reset. That’s it? nonono! If we set wait to 2s, if the user keeps sliding the scroll bar and the time is reset, the effect will be that lazyLoad will not be executed and the image will not be loaded, which is unacceptable, so we need to set a time after which lazyLoad must be executed once, the term is called throttling, the code is as follows
let img = document.getElementsByTagName('img') // Set the starting image for each iteration to prevent repeated loadingletLazyLoad ()function lazyLoad() {
let seeHeight = document.documentElement.clientHeight
let scrollHeight = document.body.scrollHeight
for (leti = n; i<img.length; i++) {if(img[i].src === 'default.png') {if(img[i].offsetHeight < seeHeight + scrollHeight){
img[i].setAttribute('src',img[i].getAttribute('data-src') n++}}}} // throttlefunction throttle(fn,wait,mustTime){
let timeout = null
let startTime = new Date()
let curTime
return function() {let context = this
let args = arguments
curTime = new Date()
if( (curTime - startTime) >= mustTime){
startTime = curTime
fn.apply(context,args)
clearTimeout(timeout)
}else{
clearTimeout(timeout)
timeout = setTimeout( function(){
fn.apply(context,args)
startTime = new Date()
},wait)
}
}
}
window.addEventListener('scroll'The throttle (the lazyLoad, 2000300, 0))Copy the code