懒加载

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>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 元素可视范围&懒加载
    如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现...
    _Dot912阅读 5,614评论 10赞 8
  • 任务29 懒加载和回到顶部
    1.如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible...
    GarenWang阅读 3,452评论 0赞 2
  • 懒加载
    如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现...
    饥人谷_全阅读 2,600评论 0赞 0
  • 懒加载
    1.如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible...
    Rising_suns阅读 2,463评论 0赞 0
  • 懒加载和预加载
    1、懒加载 1.什么是懒加载？ 懒加载也就是延迟加载。当访问一个页面的时候，先把img元素或是其他元素的背景图片路...
    xiaolizhenzhen阅读 70,547评论 18赞 160