页面滚动信息元素懒加载

最新推荐文章于 2024-04-23 18:09:29 发布

经年未远

最新推荐文章于 2024-04-23 18:09:29 发布

阅读量189

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_42628504/article/details/117408443

版权

笔记专栏收录该内容

30 篇文章 0 订阅

订阅专栏

 1.引入
     懒加载方法代码
 	<script src="./jquery.min.js" type="text/javascript"></script>
	<script src="./scrollReveal.js"></script>
	<script src="./common.js"></script>


2.懒加载元素上面加延迟效果

在这里插入图片描述

/数据源
	var dataArr = [
	{ name: "长大平", age: 12 },
	{ name: "长大平", age: 12 },
	{ name: "长大平", age: 12 },
	{ name: "长大平", age: 12 },
	{ name: "长大平", age: 12 },
	{ name: "长大平", age: 12 },
	{ name: "长大平", age: 12 },
	{ name: "长大平", age: 12 },
	{ name: "长大平", age: 12 },
	{ name: "长大平", age: 12 },
	{ name: "长大平", age: 12 },
	{ name: "长大平", age: 12 },
	{ name: "长大平", age: 12 },
	{ name: "长大平", age: 12 },
	{ name: "长大平", age: 12 },
	{ name: "长大平", age: 12 },
	{ name: "长大平", age: 12 },
	{ name: "长大平", age: 12 },
	{ name: "长大平", age: 12 },
	{ name: "长大平", age: 12 },
	{ name: "长大平", age: 12 },
	{ name: "长大平", age: 12 },
	{ name: "长大平", age: 12 },
	{ name: "长大平", age: 12 },
	]
    
	let wrap = document.getElementsByClassName("wrap")[0];
	var fragment = document.createDocumentFragment();
	dataArr.forEach((item) => {
		let bogs = document.createElement("div");
		bogs.setAttribute("data-scroll-reveal", "enter bottom over 1s");
		bogs.setAttribute("class", "a");
		fragment.appendChild(bogs)
	})
	wrap.appendChild(fragment)
	wrap.onclick = function (e) {
		var e = e || window.event;
		console.log("111", e, e.target.tagName)	
	}