Lazy loading improves page performance

1. What is lazy loading?

Lazy loading is lazy loading. For pages with multiple images, load the image only when the image appears in the page viewport. . It can prevent the page from loading all the pictures at one time, and the user waits for a long time, which affects the user experience.

2. How to implement lazy loading

1. Set the src attribute of the image in the page to empty, and store the real value of the src attribute in the custom attribute data-originnal (the custom attribute starts with data-).

2. Set the size of the pictures in the page to prevent the reflow of the page and affect the performance.

3. Determine whether the element enters the user's field of vision. (Judging by the relationship between the offsetTop property of the element and scrollTop and clientTop). If it enters the field of view, assign the value of the data-original attribute to the src attribute of the image

4. Scroll to repeatedly determine whether the element is in view.

3. Specific implementation:

1. Design HTML

<img data-original="mogu.jpg" alt="" class="picture" src=""  >

2. Determine whether the element enters the field of view

if(scrollTop+height>offsetTop){					
					
	var img = new Image(); //Asynchronously request images across domains
        			
       	img.onload = function () {
       		console.log(1);
         	item.src = img.src;
       	}
      	img.src = item.dataset.original; //Get the properties of the custom object
      				   				
}

4. Complete code

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>lazyload</title>
	<style>
	#pictures{
		width: 900px;
		border: 1px solid #ccc;
		overflow: hidden;
	}
	.picture{
		float:left;
		width:250px;
		height:250px;
		margin: 10px 20px;
		border:1px solid #ccc;

	}
	</style>
	
</head>
<body>
	<div id="pictures">
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >

	</div>
	<script>
		var images=document.getElementsByTagName('img');
		function lazyload() {
		    Array.prototype.forEach.call(images,function(item,index) {
				
				var height=document.documentElement.clientHeight;				
				var scrollTop=document.documentElement.scrollTop;				
				var offsetTop=item.offsetTop;				

				if(scrollTop+height>offsetTop){					
					
					var img = new Image();        			
       				        img.onload = function () {       					    
         		 		   item.src = img.src;
       				        }
      				img.src = item.dataset.original;      				   				
			        }							
			});		
		}
		lazyload(); //Autoload is required when the page is first loaded

		document.addEventListener("scroll",lazyload);

	</script>
</body>
</html>

Five, the basic problems and solutions in the code

1. Determine whether to enter the visual area

2. Get custom properties

1. Via element.dataset.original.

grammar:

Basically, the latest browsers are supported, and the compatibility with lower versions of browsers is not good.

For the detailed use of element.dataset, refer to the link and click to open the link

For how to be compatible with lower version browsers, please refer to my article on implementing a compatible version of element.dataset.

2.通过 document.getAtrribute（“data-original”）；

good compatibility

6. Other problems with the code

When judging whether an element is in the visible area, it will repeatedly judge the element, causing waste.

Seven, use the echo.js library to achieve preloading

echo.js is written in native js and does not need to depend on other libraries. Can be used independently. (lazyload is a jquery plugin, jquery must be introduced when using it, and the function is complete)

1. Download and import echo.js.

<script src="https://cdn.bootcss.com/echo.js/1.7.3/echo.js"></script>

2. Set the custom attribute of the image to data-echo

3. Use: Get the element and call the init() method. Receives an object. The object parameters are as follows.

offset: When the image is a distance below the visible area, start loading

throttle: how many milliseconds the image delays before loading.

unload: Whether to unload images outside the visible area. Defaults to false.

echo.init({
	offset:0,
	throttle:0,
	unload:true,
	callback:funtion(element,op){

	}
});

Lazy loading improves page performance

Guess you like