DOM -- preloading and lazy loading

Preloading ： It literally means to load in advance —— Optimization of homologous loading （ It is often used for loading sprite graphs ）

Lazy loading ： Load only when certain conditions are triggered

Preloading has nothing to say , The point to note is , Observe network Number of network requests , After preloading, no network requests will be made later , But this is under our control , stay src Adding a time object to an attribute is different , Need to load multiple times .

window.onload=function(){				
document.onscroll=function(e){
					let top=window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop
					let h=cHeight =window.innerHeight||document.body.clientHeight;
					console.log(top,img2.offsetTop-h-100)
					if(top>=(img2.offsetTop-h-100)){
						console.log(33333333333)
						img2.src=img2.dataset.src1
					}
				}
			}	

This is a lazy load , Wait until the slider slides to a certain position before loading the picture top Is the distance that has been pulled down

Why subtract one -h Well ？ Because it is the height of the page that is not subtracted until the set position. It takes an extra screen distance to trigger , It means calculated from the top of the current page . final 100 It is the time you control when you want to load .