1. Lazy loading concepts

For a page with a lot of static resources (such as online shopping page), in order to save user traffic and improve page performance, users can browse to the current resource (the size of the current window (visual area)), and then request and load the resource.

Lazy loading implementation principle

Our picture to display is commonly use img tags, and then put the SRC attribute to write the address of the images, to display the image, the thought, we first pictures don’t show up, is to write a custom property field, the value of this attribute field images written address, when the scope of the pictures in the viewing area, Take the value of the custom property as the SRC value. This enables lazy loading.

< img SRC = "" the lazyload =" true "data - the original =" FM = https://t7.baidu.com/it/u=1732966997, 2981886582 & 193 & f = GIF "Alt =" " class="image-item">Copy the code

Data-original is a property field we define ourselves, and its value is the address of the image we want. Lazyload =”true” so that when the image is loaded it will no longer need to be loaded lazily. (You don’t have to)

How do we find the viewable area?

Use: the document. The documentElement. ClientHeight can get to the height of the current screen.

So when we get to the height, we’re thinking, if this picture is in this region, let’s show it.

Then think: when the page slides up, the picture of the visual area will change, so when the mouse wheel rolls, the picture in the visual area may go out of the visual area, not may come into the visual area at this time. So we’re going to write a listen event.

/ / get the height of the viewing area var viewHeight = document. The documentElement. ClientHeight / / when the mouse to scroll to listen for an event and have a function to perform Document. The addEventListener (' scroll ', function () {/ / access to the page all img / / determine whether a / / if enter into visual area, It's own data - the value of the original out onto the SRC var arr = document. QuerySelectorAll (' img [data - the original] [the lazyload] ') // This line of code means to get all the images (data-original and lazyload).Copy the code

When we get all the IMG, we use a loop to determine if they are in the viewable area, loading them as soon as they are, and not loading them as soon as they are not. So the requirement is that the top of the image is in the height of the viewable area, and the bottom of the image is also in the viewable area, that is, the image is not scratched out.

Arr. ForEach (item = > {let the rect = item. GetBoundingClientRect () / / a container relative to the browser for one-time get the position of the up and down or so the if (the rect. Top < viewHeight && rect.bottom >= 0) { item.src = item.dataset.original item.removeAttribute('data-original') item.removeAttribute('lazyload') } })Copy the code

Complete 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, "> <title>Document</title> </head> <style>. Image-item {height: 300px; display: block; margin-bottom: 50px; } </style> <body> <img src="" lazyload="true" Data - the original = "FM = https://t7.baidu.com/it/u=1732966997, 2981886582 & 193 & f = GIF" Alt = "" class =" image - item "> < img SRC =" " The lazyload = "true" data - the original = "FM = https://t7.baidu.com/it/u=1785207335, 3397162108 & 193 & f = GIF" Alt = "" class =" image - item "> < img SRC = "" the lazyload =" true "data - the original =" FM = https://t7.baidu.com/it/u=2581522032, 2615939966 & 193 & f = GIF "Alt =" " class="image-item"> <img src="" lazyload="true" Data - the original = "FM = https://t7.baidu.com/it/u=3423293041, 3900166648 & 193 & f = GIF" Alt = "" class =" image - item "> < img SRC =" " The lazyload = "true" data - the original = "FM = https://t7.baidu.com/it/u=1417505637, 1247476664 & 193 & f = GIF" Alt = "" class =" image - item "> < img SRC = "" the lazyload =" true "data - the original =" FM = https://t7.baidu.com/it/u=3659156856, 3928250034 & 193 & f = GIF "Alt =" " class="image-item"> <img src="" lazyload="true" Data - the original = "FM = https://t7.baidu.com/it/u=1416385889, 2308474651 & 193 & f = GIF" Alt = "" class =" image - item "> < img SRC =" " The lazyload = "true" data - the original = "FM = https://t7.baidu.com/it/u=1599162854, 1822154160 & 193 & f = GIF" Alt = "" class =" image - item "> < img SRC = "" the lazyload =" true "data - the original =" FM = https://t7.baidu.com/it/u=1476844859, 894832600 & 193 & f = GIF "Alt =" " class="image-item"> <img src="" lazyload="true" Data - the original = "FM = https://t7.baidu.com/it/u=3728410568, 989468460 & 193 & f = GIF" Alt = "" class =" image - item "> < img SRC =" " The lazyload = "true" data - the original = "FM = https://t7.baidu.com/it/u=3696285528, 2808863331 & 193 & f = GIF" Alt = "" class =" image - item "> The < / body > < script > / / get the height of the viewing area var viewHeight = document. The documentElement. ClientHeight document. The addEventListener (' scroll ', Function () {// get all the img on the page // check whether one is in the viewable area // if so, It's own data - the value of the original out onto the SRC var arr = document. QuerySelectorAll (' img/data - what [the lazyload] ') / / the console. The log (arr); /* for(var i of arr){ if(arr[i].offsettop()<i){ } } */ arr.forEach(item => { let rect = Item. GetBoundingClientRect () / / a container relative to the browser for one-time get the position of the up and down or so the if (the rect. Top < viewHeight && the rect. Bottom > = 0) {item. SRC = item.dataset.original item.removeAttribute('data-original') item.removeAttribute('lazyload') } }) }) </script> </html>Copy the code

Conclusion: It’s easy to write code if you know the theory.