收藏
批改状态：合格
老师批语：对于懒加载, 重点在于理解原理,步骤, 选项卡要理解导航与详情之间的对应关系是如何体现的
懒加载的关键在于：
（1）.当图片进入可视区域，图片显示出来。图片顶部的高度小于等于可视区高度与可视区滚动距离之和时,说明已进入可视区。
（2.）创建文档片段，把图片添加到文档片段中,。这样因为是在内存中操作, 不会引起页面抖动,也不会触发大量的DOM操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>懒加载</title>
</head>
<body style="">
<script>
var container = document.createElement('div');
var frag = document.createDocumentFragment();
for (var i=13; i<= 27; i++){
var imgUrl = 'images/'+ i +'.jpg';
var img = document.createElement('img');
img.setAttribute('src','images/loading.gif');
img.setAttribute('data-src',imgUrl);
img.setAttribute('style','width:500px;height:500px;margin:5px');
frag.appendChild(img);
}
container.appendChild(frag);
document.body.insertBefore(container,document.body.firstElementChild);
window.addEventListener('scroll',lazyLoaded,false);
function lazyLoaded() {
var scrollTop = document.documentElement.scrollTop;
var clientHeight = document.documentElement.clientHeight;
var imgArr = Array.prototype.slice.call(document.images,0);
imgArr.forEach(function (img) {
if (img.offsetTop <= (scrollTop + clientHeight)){
img.setAttribute('src',img.dataset.src);
}
})
}
window.addEventListener('load', lazyLoaded, false);
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
2.选项卡最关键的点在于：
（1）.导航与详情页的一一对应，这里运用自定义属性使两者一一对应。
（2）.当前被点击的导航自动设置为激活状态，之前的导航的状态被清除。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<style>
ul,li {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
}
a:hover {
text-decoration-color: red;
text-decoration-line: underline;
}
.tab-container {
width: 300px;
height: 200px;
}
.tab-nav {
overflow: hidden;
}
.tab-nav ul li {
float: left;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
cursor: pointer;
}
.active {
background-color: plum;
}
.tab-content .detail{
line-height: 30px;
min-height: 200px;
padding-top: 10px;
display: none;
}
.detail.active {
display: block;
}
</style>
</head>
<body>
<div class="tab-container">
<div class="tab-nav">
<ul>
<li class="active" data-index="1">电视剧</li>
<li class="active" data-index="2">综艺</li>
<li class="active" data-index="3">电影</li>
</ul>
</div>
<div class="tab-content">
<div class="detail active" data-index="1">
<ul>
<li><a href="">长安十二时辰</a></li>
<li><a href="">微微一笑很倾城</a></li>
<li><a href="">流淌的美好时光</a></li>
</ul>
</div>
<div class="detail " data-index="2">
<ul>
<li><a href="">这就是街舞</a></li>
<li><a href="">王牌对王牌</a></li>
<li><a href="">奔跑吧</a></li>
</ul>
</div>
<div class="detail " data-index="3">
<ul>
<li><a href="">流浪地球</a></li>
<li><a href="">夏目友人帐</a></li>
<li><a href="">大鱼海棠</a></li>
</ul>
</div>
</div>
</div>
<script>
var tabNav = document.getElementsByClassName('tab-nav').item(0);
var tabList = tabNav.firstElementChild.children;
var tabArr = Array.prototype.slice.call(tabList, 0);
var detail = document.getElementsByClassName('detail');
var detailArr = Array.prototype.slice.call(detail,0);
tabNav.addEventListener('click',showDetail,false);
function showDetail(ev) {
tabArr.forEach(function (tab) {tab.classList.remove('active');
ev.target.classList.add('active');
detailArr.forEach(function (detail) {detail.classList.remove('active')});
detailArr.forEach(function (detail) {
if (detail.dataset.index === ev.target.dataset.index) {
detail.classList.add('active');
}
});
})
}
// tabNav.addEventListener('mouseover', showDetail, false);
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
