图片懒加载的一个实例介绍

来源：懂视网责编：小采时间：2020-11-27 20:17:54

图片懒加载的一个实例介绍

图片懒加载的一个实例介绍:在图片比较多的网站总会看见，当浏览到那个位置，就加载那的图片。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type=&qu

推荐度：

点击下载本文 文档为doc格式

导读图片懒加载的一个实例介绍:在图片比较多的网站总会看见，当浏览到那个位置，就加载那的图片。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type=&qu

在图片比较多的网站总会看见，当浏览到那个位置，就加载那的图片。

<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	*{
	margin: 0;
	padding: 0;
	}
	img{
	display: block;
	width: 500px;
	height: 300px;
	}
	div{
	margin: 500px 0 0 40px;
	}
	</style>
	</head>
	<body>
	<div id="banner">
	<img data-src="image/01.jpeg">
	<img data-src="image/02.jpeg">
	<img data-src="image/03.jpeg">
	<img data-src="image/04.jpeg">
	<img data-src="image/05.jpg">
	<img data-src="image/06.png">
	<img data-src="image/07.png">
	<img data-src="image/08.png">
	</div>

	<script type="text/javascript">
	window.onload=function(){
	var banner=document.getElementById("banner"); 
	var imgs=banner.getElementsByTagName("img");
	 add();//页面加载完成先执行一次
	function getTop(obj){ //写一个方法获取图片距离top的值
	var t=0; 　//定义一个保存top值的 变量
	while(obj){　　//循环获取每个父级定位的top值
	t+=obj.offsetTop; //获取传入或改变父级定位的top值，当到大body的时候没有 他的父级定位为null所以就停了
	obj=obj.offsetParent; //获取obj的父级定位
	console.log(t)
	console.log(obj)
	}
	return t;
	}
	function add(){
	var S = document.documentElement.scrollTop || document.body.scrollTop; //获取滑动条距top的值
	var H = window.innerHeight; //获取显示区域高度（只读）
	for(var i=0;i<imgs.length;i++){ //循环图片
	if((S+H) > getTop(imgs[i])){ 判断图片是否进入可视区域
	imgs[i].setAttribute("src",imgs[i].getAttribute("data-src")); //当进入的时候给src 赋值
	}
	}
	}
	
	window.onscroll=function(){ //每次滚动运行方法判断
	add()
	}
	}
	
	
	
	
	</script>
	</body>
</html>

图片懒加载的一个实例介绍

推荐度：

点击下载本文 文档为doc格式

标签：图片一个介绍

热门焦点

图片懒加载的一个实例介绍

图片懒加载的一个实例介绍

图片懒加载的一个实例介绍

最新推荐

猜你喜欢

热门推荐