懒加载

作者: Eazer | 来源:发表于2017-07-09 03:41 被阅读0次

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

    function isVisible($node){
    var windowHeight = $(window).height()  //窗口的高度
    var scrollTop = $(window).scrollTop()  //滚动条垂直高度
    var offsetTop = $node.offset().top   // 元素偏移位置
    
    if((offsetTop > scrollTop) && (offsetTop<(scrollTop + windowHeight))){
        return true
    }
        return false
    }
    

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

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

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

    function logVisible($node){
        $(window).on('srcoll',function(){
            var scrollTop = $(this).scrollTop()
            var windowHeight = $(this).height()
            var offsetTop = $node.offset().top()
            if((offsetTop > scrollTop) && (offsetTop < (scrollTop + windowHeight))){
                if($node,data('visible')){
                    return
                }
                $node.data('visible',true)
                console.log('true')
            }else{
                $node.data('visible',false)
            }
        })
    }
    
    logVisible($('node'))
    

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

    为了整体网站的性能考虑,是一种延时加载图片的方法。把图片真实的URL 放在data-img的值中,当图片进入可视区域的瞬间把data-img赋给src。

    【个人总结,如有错漏,欢迎指出】
    :>

    相关文章

      网友评论

        本文标题:懒加载

        本文链接:https://www.haomeiwen.com/subject/ckmchxtx.html