懒加载

2017-07-31  本文已影响0人  山门龙龙

1.如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现

function isVisible($node) {
    var scrollTop = $(window).scrollTop(),
        windowHeight = $(window).height(),
        offsetTop = $node.offset().top;
    if(offsetTop > scrollTop && offsetTop < (windowHeight + scrollTop)) {
        return true;
    }else{
        return false;
    }
}

2.当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="test.css">
</head>
<style>
    div{
        height: 2000px;
        background: green;
        overflow: hidden;
    }
    h1{
        margin-top: 1500px;
    }
</style>
<body>
    <div>
        <h1>123</h1>
    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="js.js">
    function isVisible($node) {
        var scrollTop = $(window).scrollTop(),
            windowHeight = $(window).height(),
            offsetTop = $node.offset().top;
        if(offsetTop > scrollTop && offsetTop < (windowHeight + scrollTop)) {
            return true;
        }else{
            return false;
        }
    }

    function noVisible($node) {
        if(isVisible($node) === false){
            $node.attr('visibled','false');
        }
    }

    $(window).on('scroll',function () {
        if(isVisible($('h1')) && $('h1').attr('visibled') === 'false'){
            console.log('true');
            $('h1').attr('visibled','true');
        }
        noVisible($('h1'));
    })
</script>
</html>

3.当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="test.css">
</head>
<style>
    div{
        height: 2000px;
        background: green;
        overflow: hidden;
    }
    h1{
        margin-top: 1500px;
    }
</style>
<body>
    <div>
        <h1>123</h1>
    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="js.js">
    function isVisible($node) {
        var scrollTop = $(window).scrollTop(),
            windowHeight = $(window).height(),
            offsetTop = $node.offset().top;
        if(offsetTop > scrollTop && offsetTop < (windowHeight + scrollTop)) {
            return true;
        }else{
            return false;
        }
    }

    $(window).on('scroll',function () {
        if(isVisible($('h1')) && $('h1').attr('visibled') !== 'true'){
            console.log('true');
            $('h1').attr('visibled','true');
        }
    })
</script>
</html>

4.图片懒加载的原理是什么？

图片懒加载的目的是为了解决网站性能问题，减少请求资源的浪费。
它的原理是当滚动条停止时，判断图片是否在浏览器窗口的可视范围，是否没有被加载过，如果是，就给它添加加载属性，否则不添加。图片懒加载是按需加载，而不是一开始就给所有图片都加载。

5.实现视频中的图片懒加载效果

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>懒加载</title>
</head>
<style>
    body{
        height: 3000px;
    }
    ul{
        max-width: 300px;
        padding: 0;
        margin: 50px auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    li{
        list-style: none;
    }

    img{
        width: 120px;
        height: 120px;
    }
</style>
<body>
<ul>
    <li><a href="javascript:void(0)"><img src="" alt="" data-src="http://inews.gtimg.com/newsapp_ls/0/531730377_150120/0"></a></li>
    <li><a href="javascript:void(0)"><img src="" alt="" data-src="http://inews.gtimg.com/newsapp_ls/0/531730377_150120/0"></a></li>
    <li><a href="javascript:void(0)"><img src="" alt="" data-src="http://inews.gtimg.com/newsapp_ls/0/531730377_150120/0"></a></li>
    <li><a href="javascript:void(0)"><img src="" alt="" data-src="http://inews.gtimg.com/newsapp_ls/0/531730377_150120/0"></a></li>
    <li><a href="javascript:void(0)"><img src="" alt="" data-src="http://inews.gtimg.com/newsapp_ls/0/531730377_150120/0"></a></li>
    <li><a href="javascript:void(0)"><img src="" alt="" data-src="http://inews.gtimg.com/newsapp_ls/0/531727868_150120/0"></a></li>
    <li><a href="javascript:void(0)"><img src="" alt="" data-src="http://inews.gtimg.com/newsapp_ls/0/531727868_150120/0"></a></li>
    <li><a href="javascript:void(0)"><img src="" alt="" data-src="http://inews.gtimg.com/newsapp_ls/0/531727868_150120/0"></a></li>
    <li><a href="javascript:void(0)"><img src="" alt="" data-src="http://inews.gtimg.com/newsapp_ls/0/531727868_150120/0"></a></li>
    <li><a href="javascript:void(0)"><img src="" alt="" data-src="http://inews.gtimg.com/newsapp_ls/0/531727868_150120/0"></a></li>
    <li><a href="javascript:void(0)"><img src="" alt="" data-src="http://inews.gtimg.com/newsapp_ls/0/531727868_150120/0"></a></li>
    <li><a href="javascript:void(0)"><img src="" alt="" data-src="http://inews.gtimg.com/newsapp_ls/0/531727868_150120/0"></a></li>
    <li><a href="javascript:void(0)"><img src="" alt="" data-src="http://inews.gtimg.com/newsapp_ls/0/531727868_150120/0"></a></li>
    <li><a href="javascript:void(0)"><img src="" alt="" data-src="http://inews.gtimg.com/newsapp_ls/0/531727868_150120/0"></a></li>
    <li><a href="javascript:void(0)"><img src="" alt="" data-src="http://inews.gtimg.com/newsapp_ls/0/531727868_150120/0"></a></li>
    <li><a href="javascript:void(0)"><img src="" alt="" data-src="http://inews.gtimg.com/newsapp_ls/0/531727868_150120/0"></a></li>
    <li><a href="javascript:void(0)"><img src="" alt="" data-src="http://inews.gtimg.com/newsapp_ls/0/531727868_150120/0"></a></li>
    <li><a href="javascript:void(0)"><img src="" alt="" data-src="http://inews.gtimg.com/newsapp_ls/0/531727868_150120/0"></a></li>
    <li><a href="javascript:void(0)"><img src="" alt="" data-src="http://inews.gtimg.com/newsapp_ls/0/531727868_150120/0"></a></li>
    <li><a href="javascript:void(0)"><img src="" alt="" data-src="http://inews.gtimg.com/newsapp_ls/0/531727868_150120/0"></a></li>
    <li><a href="javascript:void(0)"><img src="" alt="" data-src="http://inews.gtimg.com/newsapp_ls/0/531727868_150120/0"></a></li>
    <li><a href="javascript:void(0)"><img src="" alt="" data-src="http://inews.gtimg.com/newsapp_ls/0/531727868_150120/0"></a></li>
    <li><a href="javascript:void(0)"><img src="" alt="" data-src="http://inews.gtimg.com/newsapp_ls/0/531730377_150120/0"></a></li>
    <li><a href="javascript:void(0)"><img src="" alt="" data-src="http://inews.gtimg.com/newsapp_ls/0/531730377_150120/0"></a></li>
    <li><a href="javascript:void(0)"><img src="" alt="" data-src="http://inews.gtimg.com/newsapp_ls/0/531730377_150120/0"></a></li>
    <li><a href="javascript:void(0)"><img src="" alt="" data-src="http://inews.gtimg.com/newsapp_ls/0/531730377_150120/0"></a></li>
    <li><a href="javascript:void(0)"><img src="" alt="" data-src="http://inews.gtimg.com/newsapp_ls/0/531730377_150120/0"></a></li>
    <li><a href="javascript:void(0)"><img src="" alt="" data-src="http://inews.gtimg.com/newsapp_ls/0/531646423_150120/0"></a></li>
    <li><a href="javascript:void(0)"><img src="" alt="" data-src="http://inews.gtimg.com/newsapp_ls/0/531646423_150120/0"></a></li>
    <li><a href="javascript:void(0)"><img src="" alt="" data-src="http://inews.gtimg.com/newsapp_ls/0/531646423_150120/0"></a></li>
    <li><a href="javascript:void(0)"><img src="" alt="" data-src="http://inews.gtimg.com/newsapp_ls/0/531646423_150120/0"></a></li>
    <li><a href="javascript:void(0)"><img src="" alt="" data-src="http://inews.gtimg.com/newsapp_ls/0/531646423_150120/0"></a></li>
    <li><a href="javascript:void(0)"><img src="" alt="" data-src="http://inews.gtimg.com/newsapp_ls/0/531646423_150120/0"></a></li>
    <li><a href="javascript:void(0)"><img src="" alt="" data-src="http://inews.gtimg.com/newsapp_ls/0/531646423_150120/0"></a></li>
    <li><a href="javascript:void(0)"><img src="" alt="" data-src="http://inews.gtimg.com/newsapp_ls/0/531646423_150120/0"></a></li>
    <li><a href="javascript:void(0)"><img src="" alt="" data-src="http://inews.gtimg.com/newsapp_ls/0/531646423_150120/0"></a></li>
    <li><a href="javascript:void(0)"><img src="" alt="" data-src="http://inews.gtimg.com/newsapp_ls/0/531646423_150120/0"></a></li>
    <li><a href="javascript:void(0)"><img src="" alt="" data-src="http://inews.gtimg.com/newsapp_ls/0/531730377_150120/0"></a></li>
    <li><a href="javascript:void(0)"><img src="" alt="" data-src="http://inews.gtimg.com/newsapp_ls/0/531730377_150120/0"></a></li>
    <li><a href="javascript:void(0)"><img src="" alt="" data-src="http://inews.gtimg.com/newsapp_ls/0/531730377_150120/0"></a></li>
    <li><a href="javascript:void(0)"><img src="" alt="" data-src="http://inews.gtimg.com/newsapp_ls/0/531730377_150120/0"></a></li>
</ul>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="js.js">
    function isVisible($node) {
        var scrollTop = $(window).scrollTop(),
            windowHeight = $(window).height(),
            offsetTop = $node.offset().top;
        if(offsetTop > scrollTop && offsetTop < (windowHeight + scrollTop)) {
            return true;
        }else{
            return false;
        }
    }

    function loadImg($node) {
        $node.attr('src',$node.attr('data-src'));
    }

    function isLoaded($node) {
        return $node.attr('src') === $node.attr('data-src');
    }

    function renderImg($node) {
        $node.each(function () {
            if(isVisible($(this)) && isLoaded($(this)) === false){
                loadImg($(this));
            }
        });
    }

    renderImg($('img'));

    var clock;
    $(window).on('scroll',function () {
        if(clock){
            clearTimeout(clock);
        }
        clock = setTimeout(function () {
            renderImg($('img'));
        },300)
    })
</script>

</html>
上一篇 下一篇

猜你喜欢

热点阅读