JS implementation of image lazy loading tutorial-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

JS implementation of image lazy loading tutorial

巴扎黑

Jul 17, 2017 pm 02:59 PM

loadpicture

Image lazy loading,

Idea: When the mouse slides to the height of the corresponding image, the image is loaded;

<!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="/static/imghwm/default1.png"  data-src="../img/1.jpg"  class="lazy"  _/ alt="JS implementation of image lazy loading tutorial" >
			<img  src="/static/imghwm/default1.png"  data-src="../img/2.jpg"  class="lazy"  _/ alt="JS implementation of image lazy loading tutorial" >
			<img  src="/static/imghwm/default1.png"  data-src="../img/3.jpg"  class="lazy"  _/ alt="JS implementation of image lazy loading tutorial" >
			<img  src="/static/imghwm/default1.png"  data-src="../img/4.jpg"  class="lazy"  _/ alt="JS implementation of image lazy loading tutorial" >
			<img  src="/static/imghwm/default1.png"  data-src="../img/6.jpg"  class="lazy"  _/ alt="JS implementation of image lazy loading tutorial" >
			<img  src="/static/imghwm/default1.png"  data-src="../img/7.jpg"  class="lazy"  _/ alt="JS implementation of image lazy loading tutorial" >
			<img  src="/static/imghwm/default1.png"  data-src="../img/1.jpg"  class="lazy"  _/ alt="JS implementation of image lazy loading tutorial" >
			<img  src="/static/imghwm/default1.png"  data-src="../img/2.jpg"  class="lazy"  _/ alt="JS implementation of image lazy loading tutorial" >
			<img  src="/static/imghwm/default1.png"  data-src="../img/3.jpg"  class="lazy"  _/ alt="JS implementation of image lazy loading tutorial" >
			<img  src="/static/imghwm/default1.png"  data-src="../img/4.jpg"  class="lazy"  _/ alt="JS implementation of image lazy loading tutorial" >
			<img  src="/static/imghwm/default1.png"  data-src="../img/6.jpg"  class="lazy"  _/ alt="JS implementation of image lazy loading tutorial" >
			<img  src="/static/imghwm/default1.png"  data-src="../img/7.jpg"  class="lazy"  _/ alt="JS implementation of image lazy loading tutorial" >
			<img  src="/static/imghwm/default1.png"  data-src="../img/3.jpg"  class="lazy"  _/ alt="JS implementation of image lazy loading tutorial" >
			<img  src="/static/imghwm/default1.png"  data-src="../img/4.jpg"  class="lazy"  _/ alt="JS implementation of image lazy loading tutorial" >
			<img  src="/static/imghwm/default1.png"  data-src="../img/6.jpg"  class="lazy"  _/ alt="JS implementation of image lazy loading tutorial" >
			<img  src="/static/imghwm/default1.png"  data-src="../img/7.jpg"  class="lazy"  _/ alt="JS implementation of image lazy loading tutorial" >
		</div>
	</body>
</html>

When Loading mode commonly used when there is a layout similar to waterfall flow

<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>

The above is the detailed content of JS implementation of image lazy loading tutorial. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

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

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

Stremio字幕不工作；加载字幕时出错Feb 24, 2024 am 09:50 AM

字幕在你的WindowsPC上不能在Stremio上运行吗？一些Stremio用户报告说，视频中没有显示字幕。许多用户报告说遇到了一条错误消息，上面写着“加载字幕时出错”。以下是与此错误一起显示的完整错误消息：加载字幕时出错加载字幕失败：这可能是您正在使用的插件或您的网络有问题。正如错误消息所说，可能是您的互联网连接导致了错误。因此，请检查您的网络连接，并确保您的互联网工作正常。除此之外，这个错误的背后可能还有其他原因，包括字幕加载项冲突、特定视频内容不支持字幕以及Stremio应用程序过时。如

超简单！用 Python 为图片和 PDF 去掉水印Apr 12, 2023 pm 11:43 PM

网上下载的 pdf 学习资料有一些会带有水印，非常影响阅读。比如下面的图片就是在 pdf 文件上截取出来的，今天我们就来用Python解决这个问题。安装模块PIL：Python Imaging Library 是 python 上非常强大的图像处理标准库，但是只能支持 python 2.7，于是就有志愿者在 PIL 的基础上创建了支持 python 3的 pillow，并加入了一些新的特性。pip install pillow pymupdf 可以用 python 访问扩展名为*.pdf、

PHP实现无限滚动加载Jun 22, 2023 am 08:30 AM

随着互联网的发展，越来越多的网页需要支持滚动加载，而无限滚动加载是其中的一种。它可以让页面不断加载新的内容，使用户可以更流畅地浏览网页。在这篇文章中，我们将介绍如何使用PHP实现无限滚动加载。一、什么是无限滚动加载？无限滚动加载是一种基于滚动条的网页内容加载方式。它的原理是当用户滚动至页面底部时，通过AJAX异步调取后台数据，实现不断加载新的内容。这种加载方

插入超链接时Outlook冻结Feb 19, 2024 pm 03:00 PM

如果您在向Outlook插入超链接时遇到冻结问题，可能是由于网络连接不稳定、Outlook版本旧、防病毒软件干扰或加载项冲突等原因。这些因素可能导致Outlook无法正常处理超链接操作。修复插入超链接时Outlook冻结的问题使用以下修复程序解决插入超链接时Outlook冻结的问题：检查已安装的加载项更新Outlook暂时禁用您的防病毒软件，然后尝试创建新的用户配置文件修复办公室应用程序卸载并重新安装Office我们开始吧。1]检查已安装的加载项可能是Outlook中安装的某个加载项导致了问题。

css加载不出来怎么解决Oct 20, 2023 am 11:29 AM

css加载不出来的解决办法有检查文件路径、检查文件内容、清除浏览器缓存、检查服务器设置、使用开发者工具和检查网络连接等。详细介绍：1、检查文件路径，首先请确保CSS文件的路径正确，如果CSS文件位于网站的不同部分或子目录中，需要提供正确的路径，如果CSS文件位于根目录下，路径应该是直接的；2、检查文件内容，如果路径正确，那么问题可能出在CSS文件本身，打开CSS文件检查等等。

安装win7加载usb驱动失败怎么办Jul 11, 2023 am 08:13 AM

在安装win7系统中，有网友遇到了加载usb驱动失败的情况，usb设备无法在新的win7系统中被识别，常见的u盘，鼠标等设备就无法使用了。那么安装win7加载usb驱动失败怎么办？下面小白就教下大家安装win7加载usb驱动失败的解决方法。方法一：1、首先我们打开电脑进入电脑系统，在电脑系统查看电脑的系统版本。确认电脑系统的版本与设备驱动的版本是否一致。2、确认驱动的版本后，将USB设备连接到电脑系统。电脑系统显示，设备无法连接到系统。3、在连接信息页面，点击帮助按钮查看帮助信息。4、如果电脑系

PS AI修图免费平替来了！Stability AI又放大招，核弹级更新一键扩图Jun 12, 2023 pm 07:27 PM

此前，PS的重建图像功能就让人无比振奋，让无数人惊呼今天，StabilityAI又放大招了。它联合Clipdrop推出了UncropClipdrop——一个终极图像比例编辑器。从Uncrop这个名字上，我们就能看出它的用途。它是一个AI生成的「外画」工具，通过创建扩展背景，这个工具可以补充任何现有照片或图像，来更改任何图像的比例。敲黑板：通过Clipdrop网站，就可以免费试用这个工具了，无需登录！比例任意调，满意为止Uncrop基于StabilityAI的文本到图像模型StableDiffus

See all articles