懒加载

懒加载

如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一个函数 isVisible实现
   function isVisible($node){
      var scrollTop = $(window).scrollTop()
      var windowHeight = $(window).height()
      var offsetTop = $node.offset().top
     if(offsetTop < scrollTop + windowHeight && offsetTop  + $node.height() > scrollTop ){
            return true
            
        }
        return false
    }
   console.log(isVisible($('.test')))

测试

当窗口滚动时,判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现
<script>
        $(window).on('scroll', function () {
            if (isVisible($node)) {
                console.log(true)
            }
        })

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

  </script>

测试

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

        var isEleVisible = false
        $(function () {
        $(window).scroll(function () {
        if (isVisible($node) && !isEleVisible) {
            console.log(true)
            isEleVisible = true
        }
        })
        })


       var $node = $('.test')
         function isVisible($node){
        var scrollTop = $(window).scrollTop()
        var windowHeight = $(window).height()
        var offsetTop = $node.offset().top
        if(offsetTop < scrollTop + windowHeight && offsetTop  + $node.height() > scrollTop ){
            return true
            
        }
        return false
    }
   // console.log(isVisible($node))
  </script>

测试

图片懒加载的原理是什么?
  • 懒加载应用场景
    • 懒加载即延迟,对于图片过多的页面,为了加快页面加载速度,我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载。这样一来页面加载性能大幅提升,提高了用户体验
  • 实现原理:
    • 在页面载入时将img标签內的src指向一个小图片,即占位图,将真实地址存放于一个自定义属性data-src中,然后获取页面上的img标签并保存,开启一个定时器来遍历保存的img标签,接下来判断每个img是否出现在可视区,当某个img出现在了可视区域,就将真实地址赋值给该img的src并将该img从数组中删除以避免重复判断。
    • 我们需要判断元素是否出现在了可视区,以上第一题我做了详细解释,这里不重复说
    • 实现流程:
      当网页滚动事件被触发➡️执行加载图片操作➡️判断图片是否在可视区且是否已经加载过➡️在可视区且未被加载过则动态地将data-src的值赋给该图片的src属性
实现视频中的图片懒加载效果

预览

推荐阅读更多精彩内容

  • 如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一个函数 isVisible实现...
    _Dot912阅读 1,214评论 10 8
  • 1、懒加载 1.什么是懒加载? 懒加载也就是延迟加载。当访问一个页面的时候,先把img元素或是其他元素的背景图片路...
    xiaolizhenzhen阅读 64,027评论 18 152
  • 什么是懒加载 对于用户暂时不需要的数据,不在页面打开的时候就去发送请求,设置一个条件,当用户触发条件的时候再去加载...
    刘圣凯阅读 86评论 0 0
  • 1、懒加载1.什么是懒加载?懒加载也就是延迟加载。当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替...
    Gaochengxin阅读 206评论 1 2
  • 今天已经是二十三天了的,要坚持一件东西真的需要毅力和恒心。自己真的是喜欢写作,每次都有很多想要记录的东西,或者要写...
    李继中阅读 79评论 0 0