0715作业 - 七期作业

作业1，懒加载原理是利用元素自定义属性来实现，使用判断在可视区里的图片使用一个固定的图片假地址，不在可视区里面的使用真实的地址赋给元素自定义属性来实现。

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>懒加载作业</title>
</head>
<body>
<!--<button>显示</button>-->
<!--<button>隐藏</button>-->
<!--<hr>-->
<!--<div style="width: 600px;height: 240px;background-color: lawngreen">-->
    <!--<img src="#" data-src="./ljz.jpg" alt="">;-->
<!--</div>-->
<script>
var container = document.createElement('div');

var frag = document.createDocumentFragment();

for (var i = 1; i <= 12; 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:300px;height:350px;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>

运行实例 »

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

实例

<!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: lightblue;
        }

        .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>
        </ul>
    </div>
    <div  class="tab-content">
        <div class="detail" data-index="1">
            <ul>
                <li>选项1内容</li>
                <li>选项1内容</li>
                <li>选项1内容</li>
                <li>选项1内容</li>
            </ul>
        </div>
        <div class="detail" data-index="2">
            <ul>
                <li>选项2内容</li>
                <li>选项2内容</li>
                <li>选项2内容</li>
                <li>选项2内容</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);
    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');
            }
        });
    }
</script>

</body>
</html>

运行实例 »

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

Correction status：qualified

Teacher's comments：懒加载, 其实还有一些其它的实现方式, dom结构也不一定只有这一种, 可以试试其它方式来实现