使用js实现点击懒加载

~柠凉id

已于 2023-03-24 20:15:52 修改

阅读量346

点赞数

文章标签： css html css3 javascript

于 2022-08-27 13:09:52 首次发布

本文链接：https://blog.csdn.net/m0_71933813/article/details/126556859

版权

本文介绍了如何使用JavaScript实现点击事件触发的懒加载技术。通过`document.querySelectorAll`和`document.querySelector`选择元素，并利用`setAttribute`方法设置相应属性，达到延迟加载的效果。

摘要由CSDN通过智能技术生成

	body{margin: 0px; padding: 0px;}
			.top{width: 100%;}
			.top img{width: 100%;}
			#list{display: flex;flex-wrap: wrap; justify-content: space-around;text-align: center;}
			dl{width: 30%;}
			dl img{width: 100%;}
			h2{width: 100%;}
			.box{text-align: center;}
			#btn{border: 0px; padding: 6px 12px; background-color: #0099FF;color: white;
			cursor: pointer; margin: 20px 0px;}

	<div id="main">
			<div class="top"><img src="img/ban0.jpg" ></div>
			<div id="list">
				<h2>图片列表</h2>
				<dl>
					<dt><img xsrc="img/1.jpg" ></dt>
					<dd>范德萨</dd>
				</dl>
				<dl>
					<dt><img xsrc="img/2.jpg" ></dt>
					<dd>范德萨</dd>
				</dl>
				<dl>
					<dt><img xsrc="img/3.jpg" ></dt>
					<dd>范德萨</dd>
				</dl>
				<dl>
					<dt><img xsrc="img/4.jpg" ></dt>
					<dd>范德萨</dd>
				</dl>
				<dl>
					<dt><img xsrc="img/5.jpg" ></dt>
					<dd>范德萨</dd>
				</dl>
				<dl>
					<dt><img xsrc="img/6.jpg" ></dt>
					<dd>范德萨</dd>
				</dl>
				<dl>
					<dt><img xsrc="img/7.jpg" ></dt>
					<dd>范德萨</dd>
				</dl>
				<dl>
					<dt><img xsrc="img/8.jpg" ></dt>
					<dd>范德萨</dd>
				</dl>
				<dl>
					<dt><img xsrc="img/9.jpg" ></dt>
					<dd>范德萨</dd>
				</dl>
			</div>
			<div class="box">
				<button type="button" id="btn">点击更多</button>
			</div>
		</div>

	window.onload = function(){
				var dls = document.querySelectorAll("#list dl");//根据id名 dl下获得所有对象
				for (var i = 0; i < dls.length; i++) {//循环获得对象的长度
					dls[i].style.display = "none"
				}
				var btn = document.getElementById("btn");//根据id获得按钮对象
				var num = 3;//每次加载多少条
				btn.onclick = function(){//设置一个点击事件
					for (let i = 0; i < dls.length&&i<num; i++) {
							setTimeout(function(){//设置定时器
								dls[i].style.display = "block";
								var url = dls[i].querySelector("img").getAttribute("xsrc");
								dls[i].querySelector("img").setAttribute("src",url)
							},100)
					}
					num+=3;
					if(num>dls.length){//当加载的数量大于所获得的对象
						btn.innerText = "木有了";
						btn.setAttribute("disabled",true);
						btn.style.cssText = "background-color: #BEC4C9;cursor: not-allowed;"//添加鼠标样式禁止点击
					}
				}
			}

document.querySelectorAll（）获取多个元素

document.querySelector（）获取单个元素

setAttribute（第一个参数，第二个参数）第一个参数属性名，第二个参数属性值