Correction status:qualified
Teacher's comments:咱们学的知识点, 都分散在一个个具体的案例中了, 掌握一个个实例,比学习空洞的理论好多了
一.懒加载
创建文档片段
将图片真实地址保存在一个自定义属性中,当用户触发事件如滚动滚动条时,进行一些简单判断如,判断图片顶部距离是否小于可视区高度和可视滚动距离之和,如果是代表该图片进入了可视区,将自定义属性种图片的真实地址与src中的临时地址交换
上述完成后会发现不滚动滚动条时事件不会触发,所以需要额外 添加一个事件,当页面加载完成 后再次触发懒加载事件
可视区高度:用户看到的窗口高度
滚动距离:有滚动条情况下,滚动条顶部与窗口顶部的距离
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>lazyonload</title> <style> </style> </head> <body> <script> var cont=document.createElement("div"); //创建文档片段 var frg=document.createDocumentFragment(); for(var i=1;i<=12;i++){ //创建图片真实地址 var imgdizhi=`images/${i}.jpg`; var img=document.createElement("img"); //设置转圈占位图片 img.setAttribute('src','images/loading.gif'); //将真实地址保存到自定义属性中 img.setAttribute('data-dz',imgdizhi); //设置图片大小 img.setAttribute('style','width:500px;height:500px;margin:10px;'); //图片添加到文档片段种 frg.appendChild(img); } //将文档片段添加到容器中 cont.appendChild(frg); document.body.insertBefore(cont,document.body.firstElementChild); //监听窗口滚动事件 window.addEventListener('scroll',lazy,false); function lazy(event){ //获取滚动高度 var scrollTop=document.documentElement.scrollTop; //获取可视区高度 var clientTop=document.documentElement.clientHeight; //将图片转换为数组对象 var imgarr=Array.prototype.slice.call(document.images,0); imgarr.forEach(function(img){ //如果图片顶部的距离小于可视区高度+可视区滚动距离之和 if(img.offsetTop<=(scrollTop+clientTop)){ //设置img真实地址 img.setAttribute('src',img.dataset.dz); } }); } //直接进入时图片没有加载所以需要添加一个load事件,当页面加载完成自动调用 window.addEventListener('load',lazy,false); </script> </body> </html>
点击 "运行实例" 按钮查看在线实例
二.选项卡
导航栏与内容区通过自定义属性建立联系
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>choose</title> <style> ul,li { margin: 0; padding: 0; list-style: none; } a { color:black; text-decoration: none; } a:hover { text-decoration-line: underline; color:red; } .tab-container { width: 300px; height: 200px; } .tab-content ul li{ height:30px; width:100%; margin:20px; } .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: lightgreen; } .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">1</li> <li data-index="2">2</li> <li data-index="3">3</li> </ul> </div> <!-- 对应的内容--> <div class="tab-content"> <div class="detail active" data-index="1"> <ul> <li><a href="">1-1</a></li> <li><a href="">1-2</a></li> <li><a href="">1-3</a></li> </ul> </div> <div class="detail" data-index="2"> <ul> <li><a href="">2-1</a></li> <li><a href="">2-2</a></li> <li><a href="">2-3</a></li> </ul> </div> <div class="detail" data-index="3"> <ul> <li><a href="">3-1</a></li> <li><a href="">3-2</a></li> <li><a href="">3-3</a></li> </ul> </div> </div> </div> <script> //获取导航 var taball=document.getElementsByClassName("tab-nav").item(0); //获取导航下的所有li var tablt=taball.firstElementChild.children; //转换为数组 var tabArr=Array.prototype.slice.call(tablt,0); //获取详情页 var detail=document.getElementsByClassName("detail"); //转换为数组 var detailArr=Array.prototype.slice.call(detail,0); //事件委托 taball.addEventListener('mouseover',showdetail,false); function showdetail(event){ //通过遍历移除active tabArr.forEach(function(tab){ tab.classList.remove("active") }); //当前导航添加active event.target.classList.add("active"); detailArr.forEach(function(detail){ detail.classList.remove("active") }); detailArr.forEach(function(detail){ //判断内容区自定义属性是否和导航区相同 //event.target当前点击的li对象 if(detail.dataset.index===event.target.dataset.index){ detail.classList.add("active"); } }); } </script> </body> </html>
点击 "运行实例" 按钮查看在线实例