懒加载的实现：
我修改了一些内容更符合一下我做的项目中的实际需求：
只获取含有自定义属性data-src的img标签
收藏
var imgarr = Array.prototype.slice.call(document.querySelectorAll('[data-src]'), 0);
console.log(imgarr);<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="robots" content="nofollow">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=yes">
<title>图片懒加载</title>
<style>
* {
padding: 0;
margin: 0;
border: none;
}
.con {
max-width: 500px;
margin: 0 auto;
background-color: #eee;
overflow: hidden;
}
.con img {
max-width : 100%;
height: auto;
display: block;
margin: 20px auto;
}
</style>
</head>
<body>
<div class="con">
<img src="https://blog.datuzi.top/static/upload/image/20190629/1561800927937351.jpg" data-src="https://source.unsplash.com/500x500/?program">
<img src="https://blog.datuzi.top/static/upload/image/20190629/1561800927937351.jpg" data-src="https://source.unsplash.com/500x500/?document">
<img src="https://blog.datuzi.top/static/upload/image/20190629/1561800927937351.jpg" data-src="https://source.unsplash.com/500x500/?book,library">
<img src="https://blog.datuzi.top/static/upload/image/20190629/1561800927937351.jpg" data-src="https://source.unsplash.com/500x500/?github">
<img src="https://blog.datuzi.top/static/upload/image/20190629/1561800927937351.jpg" data-src="https://source.unsplash.com/500x500/?cartoon">
<img src="https://blog.datuzi.top/static/upload/image/20190629/1561800927937351.jpg" data-src="https://source.unsplash.com/500x500/?beauty">
<img src="https://blog.datuzi.top/static/upload/image/20190629/1561800927937351.jpg" data-src="https://source.unsplash.com/500x500/?daily">
<img src="https://blog.datuzi.top/template/datuzi/img/bg.jpg">
<img src="https://blog.datuzi.top/static/upload/image/20190629/1561800927937351.jpg" data-src="https://source.unsplash.com/500x500/?yes">
<img src="https://blog.datuzi.top/static/upload/image/20190629/1561800927937351.jpg" data-src="https://source.unsplash.com/500x500/?hello">
<img src="https://blog.datuzi.top/static/upload/image/20190629/1561800927937351.jpg" data-src="https://source.unsplash.com/500x500/?rg">
<img src="https://blog.datuzi.top/static/upload/image/20190629/1561800927937351.jpg" data-src="https://source.unsplash.com/500x500/?no">
</div>
<script>
// 监听页面滚动时间
window.addEventListener('scroll', Lazyload, false);
// 懒加载方法
function Lazyload() {
// 获取滚动高度
var scrollTop = document.documentElement.scrollTop;
// 获取可视区高度
var clientHeight = document.documentElement.clientHeight;
// 将所有图片转换为数组
var imgarr = Array.prototype.slice.call(document.querySelectorAll('[data-src]'), 0);
console.log(imgarr);
// var imgarr = Array.from(document.images);
imgarr.forEach(function (img) {
// 判断图片顶部距离小于可视区高度与可视区滚动距离的话，说明该图片已经进入可视区
if (img.offsetTop <= (scrollTop + clientHeight)) {
img.setAttribute('src', img.dataset.src)
};
});
};
window.addEventListener('load', Lazyload, false);
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
选项卡：
修改了dom结构，精简掉一个div
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="robots" content="nofollow">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=yes">
<title>TAB选项卡</title>
<style>
* {
padding: 0;
margin: 0;
border: none;
}
.tab {
width: 100%;
max-width: 500px;
margin: 120px auto;
overflow: hidden;
}
.tab ul {
list-style: none;
overflow: hidden;
}
.tab ul li {
float: left;
width: 25%;
line-height: 40px;
text-align: center;
cursor: pointer;
}
.tab ul li.active {
background-color: #0094ff;
color: #fff;
}
.tab-con {
overflow: hidden;
}
.tab-con .tab-item {
display: none;
background-color: #0094ff;
color: #fff;
padding: 30px;
min-height: 300px
}
.tab-con .tab-item.active {
display: block;
}
</style>
</head>
<body>
<!-- HTML结构 -->
<div class="tab">
<ul class="tab-nav">
<li class="active" data-index="1">选项卡一</li>
<li data-index="2">选项卡二</li>
<li data-index="3">选项卡三</li>
<li data-index="4">选项卡四</li>
</ul>
<div class="tab-con">
<div class="tab-item active" data-index="1">内容一</div>
<div class="tab-item" data-index="2">内容二</div>
<div class="tab-item" data-index="3">内容三</div>
<div class="tab-item" data-index="4">内容四</div>
</div>
</div>
<script>
// 获取TAB选项卡的ul导航以及所有的li标签，并转换为数组对象
var tabnav = document.getElementsByClassName("tab-nav").item(0);
var tablist = tabnav.getElementsByTagName("li");
var tabarr = Array.prototype.slice.call(tablist, 0);
// 控制台打印检查是否正确
console.log(tabnav);
console.log(tablist);
console.log(tabarr);
// 获取TAB选项卡所有的详情内容，并转换为数组对象
var tabitem = document.getElementsByClassName("tab-item");
var tabitemarr = Array.prototype.slice.call(tabitem, 0);
// 控制台打印检查是否正确
console.log(tabitem);
console.log(tabitemarr);
// 利用冒泡事件，进行事件委托
tabnav.addEventListener('click', showitem, false);
// 监听TAB选项卡点击事件
function showitem(ev) {
// 清空原li标签的样式，并设置被点击的标签页为当前页
tabarr.forEach(function (tabnav) { tabnav.classList.remove('active') });
ev.target.classList.add('active');
// 清空原选项卡详情内容的样式，并根据导航的data-index属性的对应关系，显示对应的详情内容
tabitemarr.forEach(function (tabitem) { tabitem.classList.remove('active') });
tabitemarr.forEach(function (tabitem) {
// 判断当详情内容的data-index与导航标签的data-index相同市，显示改内容
if (tabitem.dataset.index === ev.target.dataset.index) {
tabitem.classList.add('active');
}
})
};
// 鼠标移入事件
tabnav.addEventListener('mouseover', showitem, false);
</script>
</body>
</html点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
