懒加载

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

 function isVisible($node){
      var nodeTop = $node.offset().top
      var windowHeight = $(window).height()
      var nodeScroll = $(window).scrollTop()
      if (nodeTop < windowHeight + nodeScroll && nodeTop > nodeScroll){
          console.log('元素出现在窗口可视范围中')
      }
 }

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

$('window').on('scroll', function(){
      var nodeTop = $node.offset().top
      var windowHeight = $(window).height()
      var nodeScroll = $(window).scrollTop()
      if (nodeTop < windowHeight + nodeScroll && nodeTop > nodeScroll){
          console.log(true)
      }
})

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

代码

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

先设置图片的data-set属性(作用就是为了存取值)值为其图片路径,由于不是src,所以不会发送http请求。 然后我们计算出页面scrollTop的高度和浏览器的高度之和, 如果图片举例页面顶端的坐标Y(相对于整个页面,而不是浏览器窗口)小于前两者之和,就说明图片就要显示出来了(合适的时机,当然也可以是其他情况),这时候我们再将 data-set 属性替换为 src 属性即可。
代码核心

    function lazyRender(){
        $('img').each(function(){    //遍历每一张图片
            if (checkShow($(this)) && !isLoaded($(this))) {  //检测图片是否位于当前窗口中、图片是否已加载
                loadImg($(this)) //利用`attr`替换图片属性
            }
        })
    }

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

代码

你可能感兴趣的:(懒加载)