Blogger Information
Blog 29
fans 0
comment 0
visits 19664
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
懒加载与选项卡实现原理及其案例-2019年7月15日
blog
Original
583 people have browsed it

一.懒加载

  1. 创建文档片段

  2. 将图片真实地址保存在一个自定义属性中,当用户触发事件如滚动滚动条时,进行一些简单判断如,判断图片顶部距离是否小于可视区高度和可视滚动距离之和,如果是代表该图片进入了可视区,将自定义属性种图片的真实地址与src中的临时地址交换

  3. 上述完成后会发现不滚动滚动条时事件不会触发,所以需要额外 添加一个事件,当页面加载完成 后再次触发懒加载事件

可视区高度:用户看到的窗口高度

滚动距离:有滚动条情况下,滚动条顶部与窗口顶部的距离

实例

<!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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

1.png

二.选项卡

  1. 导航栏与内容区通过自定义属性建立联系


实例

<!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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

1.png

Correction status:qualified

Teacher's comments:咱们学的知识点, 都分散在一个个具体的案例中了, 掌握一个个实例,比学习空洞的理论好多了
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post