JS实现图片懒加载教程-js教程-PHP中文网

首页

web前端

js教程

JS实现图片懒加载教程

巴扎黑

Jul 17, 2017 pm 02:59 PM

加载图片

图片懒加载，

　　思路:当鼠标滑动到对应图片的高度时，进行图片的加载；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#div{
				width: 575px;
				height: auto;
                overflow: hidden;
                border: red 1px solid;
                margin: 0 auto;
                /*给该div设置定位*/
                position: relative;
			}
			#div img{
				width: 267px;
				height: 396px;
				margin-left: 10px;
				border: 1px solid #000;
			}
		</style>
		<script type="text/javascript">
			function getPos(obj){
				var l = 0;
				var t = 0;
				while(obj){
					
					l += obj.offsetLeft;
					t += obj.offsetTop;
					obj = obj.offsetParent;
				}
				return {left:l ,top : t}
			}
			window.onload = window.onscroll =  function(){
				//获取到img
				    var aImg = document.getElementsByTagName("img");
				//获取到它的scrollTop 值   考虑兼容问题
					var oScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
//				 clientHeight = 上下padding + height
					var clientH = document.documentElement.clientHeight;
					//循环遍历每一项通过调用获取到每一个i 项对象的top 值
					for (var i = 0;i<aImg.length;i++) {
						var aImgTop = getPos(aImg[i]).top;
//						当滚动的时候进行判断,看他的滚动的高度加上它的clientHeight  是否比它的 top 值大   
//						如果大或等于说明滚动到当前位置可以加载图片
						if (oScrollTop + clientH >= aImgTop) {
//							进行图片的加载
							aImg[i].src = aImg[i].getAttribute("_src");
						}
					}
			}
		</script>
	</head>
	<body>
		<div id="div">
			<img _src="../img/1.jpg"/>
			<img _src="../img/2.jpg"/>
			<img _src="../img/3.jpg"/>
			<img _src="../img/4.jpg"/>
			<img _src="../img/6.jpg"/>
			<img _src="../img/7.jpg"/>
			<img _src="../img/1.jpg"/>
			<img _src="../img/2.jpg"/>
			<img _src="../img/3.jpg"/>
			<img _src="../img/4.jpg"/>
			<img _src="../img/6.jpg"/>
			<img _src="../img/7.jpg"/>
			<img _src="../img/3.jpg"/>
			<img _src="../img/4.jpg"/>
			<img _src="../img/6.jpg"/>
			<img _src="../img/7.jpg"/>
		</div>
	</body>
</html>

登录后复制

　　当有类似于瀑布流的布局时常用的加载模式

<script>
var num = document.getElementsByTagName(&#39;img&#39;).length;
var img = document.getElementsByTagName("img");
var n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历
lazyload(); //页面载入完毕加载可是区域内的图片
window.onscroll = 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") == "") {
img[i].src = img[i].getAttribute("data-src");
}
n = i + 1;
}
}
}
</script>

登录后复制

<script>
var n = 0,
imgNum = $("img").length,
img = $(&#39;img&#39;);
lazyload();
$(window).scroll(lazyload);
function lazyload(event) {
for (var i = n; i < imgNum; i++) {
if (img.eq(i).offset().top < parseInt($(window).height()) + parseInt($(window).scrollTop())) {
if (img.eq(i).attr("src") == "") {
var src = img.eq(i).attr("data-src");
img.eq(i).attr("src", src);
n = i + 1;
}
}
}
}
</script>

登录后复制

以上是JS实现图片懒加载教程的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7530

CakePHP 教程

1379

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

小红书发布自动保存图片怎么解决？发布自动保存图片在哪里？ Mar 22, 2024 am 08:06 AM

随着社交媒体的不断发展，小红书已经成为越来越多年轻人分享生活、发现美好事物的平台。许多用户在发布图片时遇到了自动保存的问题，这让他们感到十分困扰。那么，如何解决这个问题呢？一、小红书发布自动保存图片怎么解决？1.清除缓存首先，我们可以尝试清除小红书的缓存数据。步骤如下：（1）打开小红书，点击右下角的“我的”按钮；（2）在个人中心页面，找到“设置”并点击；（3）向下滚动，找到“清除缓存”选项，点击确认。清除缓存后，重新进入小红书，尝试发布图片看是否解决了自动保存的问题。2.更新小红书版本确保你的小

抖音评论里怎么发图片？评论区图片入口在哪里？ Mar 21, 2024 pm 09:12 PM

随着抖音短视频的火爆，用户们在评论区互动变得更加丰富多彩。有些用户希望在评论中分享图片，以更好地表达自己的观点或情感。那么，抖音评论里怎么发图片呢？本文将为你详细解答这个问题，并为你提供一些相关的技巧和注意事项。一、抖音评论里怎么发图片？1.打开抖音：首先，你需要打开抖音APP，并登录你的账号。2.找到评论区：在浏览或发布短视频时，找到想要评论的地方，点击“评论”按钮。3.输入评论内容：在评论区输入你的评论内容。4.选择发送图片：在输入评论内容的界面，你会看到一个“图片”按钮或者“+”号按钮，点

在 iPhone 上使图片更清晰的 6 种方法 Mar 04, 2024 pm 06:25 PM

Apple最近的iPhone可以通过清晰的细节、饱和度和亮度来捕捉回忆。但有时，您可能会遇到一些问题，这些问题可能会导致图像看起来不那么清晰。尽管iPhone相机上的自动对焦已经取得了长足的进步，可以让您快速拍照，但相机在某些情况下可能会错误地对焦错误的拍摄对象，从而使照片在不需要的区域更加模糊。如果iPhone上的照片看起来失焦或总体上缺乏清晰度，以下帖子应该可以帮助您使它们更清晰。如何在iPhone上使图片更清晰[6种方法]您可以尝试使用本机的“照片”应用来清理照片。如果您需要更多功能和选项

ppt怎么让图片一张一张出来 Mar 25, 2024 pm 04:00 PM

在PowerPoint中，让图片逐一显示是一种常用的技巧，可以通过设置动画效果来实现。本指南详细介绍了实现这一技巧的步骤，包括基本设置、图片插入、添加动画、调整动画顺序和时间。此外，还提供了高级设置和调整，例如使用触发器、调整动画速度和顺序，以及预览动画效果。通过遵循这些步骤和技巧，用户可以轻松地在PowerPoint中设置图片逐一出现，从而提升演示文稿的视觉效果并吸引观众的注意力。

在Illustrator中加载插件时出错[修复] Feb 19, 2024 pm 12:00 PM

启动AdobeIllustrator时是否会弹出加载插件时出错的消息？一些Illustrator用户在打开该应用程序时遇到了此错误。消息后面紧跟着一系列有问题的插件。该错误提示表明已安装的插件存在问题，但也可能是由于VisualC++DLL文件损坏或首选项文件受损等其他原因引起。如果遇到此错误，我们将在本文中指导您修复问题，请继续阅读以下内容。在Illustrator中加载插件时出错如果您在尝试启动AdobeIllustrator时收到“加载插件时出错”的错误消息，您可以使用以下用途：以管理员身

如何使用HTML、CSS和jQuery实现图片合并展示的高级功能 Oct 27, 2023 pm 04:36 PM

如何使用HTML、CSS和jQuery实现图片合并展示的高级功能概述:在网页设计中，图片展示是一个重要的环节，而图片合并展示是提高页面加载速度和提升用户体验的常用技巧之一。本文将介绍如何使用HTML、CSS和jQuery来实现图片合并展示的高级功能，并提供具体的代码示例。一、HTML布局:首先，我们需要在HTML中创建一个容器来展示合并后的图片。可以使用di

福昕PDF阅读器如何将pdf文档转成jpg图片-福昕PDF阅读器将pdf文档转成jpg图片的方法 Mar 04, 2024 pm 05:49 PM

你们是不是也在使用福昕PDF阅读器软件呢?那么你们知道福昕PDF阅读器如何将pdf文档转成jpg图片吗?下面这篇文章就为大伙带来了福昕PDF阅读器将pdf文档转成jpg图片的方法，感兴趣的小伙伴们快来下文看看吧。先启动福昕PDF阅读器，接着在顶部工具栏找到“特色功能”，然后选择“PDF转其他”功能。在接下来，打开一个名为“福昕pdf在线转换”的网页。在页面上方右侧点击“登录”按钮进行登录，然后打开“PDF转图片”功能。之后点击上传按钮并将想要转换成图片的pdf文件添加进来，添加完毕后点击“开始转

网页图片加载不出来怎么办？6种解决办法 Mar 15, 2024 am 10:30 AM

　　有网友发现打开浏览器网页，网页上的图片迟迟加载不出来，是怎么回事？检查过网络是正常的，那是哪里出现了问题呢？下面小编就给大家介绍一下网页图片加载不出来的六种解决方法。　　网页图片加载不出来：　　1、网速问题　　网页显示不出图片有可能是因为电脑的网速比较慢，电脑中开启的软件比较多，　　而我们访问的图片比较大，这就可能因为加载超时，导致图片显示不出来，　　可以将比较占网速的软件将关掉，可以去任务管理器查看一下。　　2、访问人数过多　　网页显示不出图片还有可能是因为我们访问的网页，在同时间段访问的

See all articles

JS实现图片懒加载教程

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题