进阶16:懒加载

题目1:如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一个函数 isVisible实现

image.png

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
    .div1 {
        height: 700px;
    }   
    p {
        color: red;
        font-size: 40px;
        border: 1px solid;
    }
    .div2 {
        height: 700px;
    }
</style>    
<script type="text/javascript" src="http://code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript">
    $(function(){
        // var isOut =false
        $(window).on('scroll',function(){
            if(isVisible($('p'))){
                // isOut =true
                console.log('true')
            }
            else{
                console.log('false')
            }
        })


        function isVisible($node){
            var $windowHeight = $(window).height()
            var $scrollTop = $(window).scrollTop()
            var $offsetHeight = $node.offset().top
            if($offsetHeight <= $windowHeight + $scrollTop && $offsetHeight >= $scrollTop){
                return true
            }else{
                return false
            }
        }
    })
</script>   
</head>
<body>
    <div class="div1"></div>
    <p>我出现了</p>
    <div class="div2"></div>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
    .div1 {
        height: 700px;
    }   
    p {
        color: red;
        font-size: 40px;
        border: 1px solid;
    }
    .div2 {
        height: 700px;
    }
</style>    
<script type="text/javascript" src="http://code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript">
    $(function(){
        var isOut =false
        $(window).on('scroll',function(){
            if(isVisible($('p')) && !isOut){
                isOut =true
                console.log('true')
            }
            else{
                console.log('false')
            }
        })


        function isVisible($node){
            var $windowHeight = $(window).height()
            var $scrollTop = $(window).scrollTop()
            var $offsetHeight = $node.offset().top
            if($offsetHeight <= $windowHeight + $scrollTop && $offsetHeight >= $scrollTop){
                return true
            }else{
                return false
            }
        }
    })
</script>   
</head>
<body>
    <div class="div1"></div>
    <p>我出现了</p>
    <div class="div2"></div>
</body>
</html>

题目4: 图片懒加载的原理是什么?

当窗口滚动的时,触发窗口滚动时间,判断图片元素节点是否出现在窗口可视范围并且是否第一次出现,如出现且第一次出现,则加载图片。

题目5: 实现视频中的图片懒加载效果

http://js.jirengu.com/qixokujaco/1/edit?html,output

推荐阅读更多精彩内容

  • 题目1:如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一个函数 isVisib...
    饥人谷_桶饭阅读 103评论 0 1
  • 1:如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一个函数 isVisible...
    晓风残月1994阅读 97评论 0 0
  • 题目1:如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一个函数 isVisib...
    Maaaax阅读 52评论 0 0
  • 1. 如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一个函数 isVisibl...
    饥人谷_流水阅读 36评论 0 0
  • 1.如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一个函数 isVisible...
    24_Magic阅读 76评论 0 0