communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > le corps du texte

Un exemple de chargement paresseux d'images

零下一度
Libérer： 2017-06-29 11:36:07
original
1478 Les gens l'ont consulté

Vous le verrez toujours sur les sites Web contenant de nombreuses images. Lorsque vous accédez à cet emplacement, l'image y sera chargée. 

<!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>
Copier après la connexion

　

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées：
加载 图片
source：php.cn
Article précédent：Introduction détaillée aux fermetures en js Article suivant：vue项目实战爬坑小记002
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Déplacez le contenu vers la gauche en ajoutant la propriété Largeur J'ai prévu des marges au corps. main {gauche marge : 200px ; marge droite : 200px ; aligne...
Depuis 2024-04-06 22:01:35
0
3
816
La requête et la formule forment la table entière, avec de nouvelles colonnes, où les nouvelles colonnes sont des formules impliquant d'autres valeurs de colonnes conditionnelles. EDIT : La formule doit être la colonne "valeur" - la colonne "valeur" ...
Depuis 2024-04-06 21:23:40
0
2
530
Comment utiliser les composants Laravel avec des espaces réservés paresseux Livewire Je souhaite ajouter le squelette de mon composant Laravel dans un espace réservé livewire3...
Depuis 2024-04-06 20:02:10
0
2
543
Problèmes rencontrés lors de l'utilisation d'opentbs pour générer des fichiers odt : les valeurs d'une même clé sont affichées dans la même ligne au lieu de colonnes séparées. J'utilise une bibliothèque appelée OpenTbs pour créer odt en utilisant PHP, je l'utilise c...
Depuis 2024-04-06 20:18:18
0
1
483
En vue mobile, comment fermer cette barre de navigation lorsque l'utilisateur clique sur le lien ? Lorsque l'utilisateur clique sur un lien pour naviguer sur le site Internet, la barre de n...
Depuis 2024-04-06 19:23:03
0
1
411
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal