原生javascript实现图片懒加载

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>Document</title>  
<style>
div{
width: 300px;
height: 300px;
margin-bottom: 20px;
}
</style>  
</head>  
<body>
<div>
<img src="http://www.zj1024.com/images/loading.gif" data-src="http://www.zj1024.com/item/works/shuyuan/images/shuyuan6.jpg">
</div>
<div>
<img src="http://www.zj1024.com/images/loading.gif" data-src="http://www.zj1024.com/item/works/shuyuan/images/shuyuan1.jpg">
</div>
<div>
<img src="http://www.zj1024.com/images/loading.gif" data-src="http://www.zj1024.com/item/works/shuyuan/images/shuyuan6.jpg">
</div>
<div>
<img src="http://www.zj1024.com/images/loading.gif" data-src="http://www.zj1024.com/item/works/shuyuan/images/shuyuan1.jpg">
</div>
<div>
<img src="http://www.zj1024.com/images/loading.gif" data-src="http://www.zj1024.com/item/works/shuyuan/images/shuyuan6.jpg">
</div>
<div>
<img src="http://www.zj1024.com/images/loading.gif" data-src="http://www.zj1024.com/item/works/shuyuan/images/shuyuan1.jpg">
</div>
<div>
<img src="http://www.zj1024.com/images/loading.gif" data-src="http://www.zj1024.com/item/works/shuyuan/images/shuyuan6.jpg">
</div>
<div>
<img src="http://www.zj1024.com/images/loading.gif" data-src="http://www.zj1024.com/item/works/shuyuan/images/shuyuan1.jpg">
</div>
<div>
<img src="http://www.zj1024.com/images/loading.gif" data-src="http://www.zj1024.com/item/works/shuyuan/images/shuyuan6.jpg">
</div>
<div>
<img src="http://www.zj1024.com/images/loading.gif" data-src="http://www.zj1024.com/item/works/shuyuan/images/shuyuan1.jpg">
</div>
</body>
  
<script>
;(function(window,document){
	var num = document.getElementsByTagName('img').length;  
	var img = document.getElementsByTagName('img');
	var n = 0; //存储图片加载到的位置,避免每次都从第一张图片开始遍历
	lazyload(); //页面载入完毕加载可是区域内的图片
	function lazyload() { //监听页面滚动事件
	    var seeHeight = document.documentElement.clientHeight; //可见区域高度  
	    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度  
	    for (var i = n; i < num; i++) {  
	        if (img[i].offsetTop < seeHeight + scrollTop) {  
	            if (img[i].getAttribute("src") == "http://www.zj1024.com/images/loading.gif") {  
	                img[i].src = img[i].getAttribute("data-src");  
	            }  
	            n = i + 1;  
	        }  
	    }  
	}  
	// 简单的节流函数  
	//fun 要执行的函数  
	//delay 延迟  
	//time  在time时间内必须执行一次  
	function throttle(fun, delay, time) {  
	    var timeout,  
	        startTime = new Date();  
	    return function() {  
	        var context = this,  
	            args = arguments,  
	            curTime = new Date();  
	        clearTimeout(timeout);  
	        // 如果达到了规定的触发时间间隔,触发 handler  
	        if (curTime - startTime >= time) {
	            fun.apply(context, args);  
	            startTime = curTime;  
	            // 没达到触发间隔,重新设定定时器  
	        } else {
	            timeout = setTimeout(function(){
	                fun.apply(context, args);  
	            }, delay);
	        }  
	    };  
	};  
	// 实际想绑定在 scroll 事件上的 handler
	// 采用了节流函数
	window.addEventListener('scroll',throttle(lazyload,500,1000)); 
})(window,document);
</script>  
</html>  

©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页