js懒加载

懒加载的实现：

1.懒加载的作用和原理：

在我们展示过多图片的时候，类似于淘宝的图片有很多，全部从服务器请求会给用户带来糟糕的体验，所以为了提高用户体验，下拉逐渐加载。

每个图片的src都会有一个get请求，我们把不能看到的图片src设置相同的图片，这些图片发一次请求即可，设置属性data-imgurl为真正的路径。当图片滚动到可视区域时，我们就用js把data-imgurl赋值到src,这就是简单的懒加载实现。

<div class="allCon">
	<div class="laCon">
		<div class="laCon_left">
			<img src="image/arr.png" data-imgurl="image/pp.png">
		</div>
		<div class="laCon_right">
			<p>老大的店</p>
			<span>聚二甲基硅氧烷聚二甲基硅氧烷聚二甲基硅氧烷聚二甲基硅氧烷聚二甲基硅氧烷聚二甲基硅氧烷聚二甲基硅氧烷</span>
		</div>
	</div>
<div class="laCon laCons">
		<div class="laCon_left">
			<img src="image/arr.png" data-imgurl="image/pp.png">
		</div>
		<div class="laCon_right">
			<p>老大的店</p>
			<span>聚二甲基硅氧烷聚二甲基硅氧烷聚二甲基硅氧烷聚二甲基硅氧烷聚二甲基硅氧烷聚二甲基硅氧烷聚二甲基硅氧烷</span>
		</div>
	</div>
</div>
<script>
		var aImages = document.querySelectorAll('img'); 
		console.log(aImages)
		let len = aImages.length;
		//记录加载图片位置 避免第一张就开始加载 
		let n = 0;
		let canrun = true;
		//窗口高度 
		let seeHeight = document.documentElement.clientHeight;
		console.log("seeHeight="+seeHeight);

		lazyLoad();
		window.onscroll = function(){
			if(!canrun){
				return ; //把控制权返回给页面
			}
			canrun = false;
			setTimeout(function(){
				console.log('***');
				lazyLoad();
				canrun= true;
			},1000)
		}

		function lazyLoad(){
			//获取图片置顶高度
			let scrollTop = document.body.scrollTop ||　document.documentElement.scrollTop;
			console.log("scrollTop="+scrollTop);
			for(let i=0; i<len; i++){
				console.log(aImages[i].offsetTop);
				//图片距顶部的高度=可是高度+scrollTop滚动后被隐藏的高度
				if(aImages[i].offsetTop < seeHeight + scrollTop) {
					if(aImages[i].getAttribute('src')=='image/arr.png'){
						aImages[i].src=aImages[i].getAttribute('data-imgurl') 
					}
					n = i+1;
					console.log("n="+n);
				}
			}
		}
</script>

　　

转载于:https://www.cnblogs.com/Jessical8619/p/9934003.html