懒加载

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

function isVisible($node) {
      if($(window).height()+$(window).scrollTop()>$node.offset().top+$node.height()&&$(window).scrollTop()<$node.offset().top+$node.height()){
        return true
      }else{
        return false
      }
    }

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

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

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

var isNodeShow = true    //状态锁
    function isVisible($node) {
      if($(window).height()+$(window).scrollTop()>$node.offset().top+$node.height()&&$(window).scrollTop()<$node.offset().top+$node.height()){
        return true
      }else{
        return false
      }
    }
    $(window).on('scroll',function () {
      if(isVisible($('#aaa')) && isNodeShow){
        isNodeShow = false
        console.log(true)
      }
    })

图片懒加载的原理是什么？

在图片所在区域没有显示在窗口里的时候，不设置图片的src属性，并将src储存在img的自定义属性里；当图片所在区域出现在窗口里的时候讲图片的src属性该为正确的src地址。