visible, 图片懒加载

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

$.fn.isVisible = function(){
    var nodeT = $(this).offset().top,
        screenH = $(window).height(),
        scrollT = $(document).scrollTop()
    if(nodeT > scrollT&&nodeT<screenH+scrollT){
        return true
    }
    return false
}

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

$(document).on('scroll',function(){
     var $target = $('.box-target')
     if($target.isVisible()) {
         console.log(true)
     }
})

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

 function isLoad($target) {
     if (!$target.data('isLoad')) {
         console.log(true)
         $target.data('isLoad',true)
     }
 }
 $(document).on('scroll',function(){
     var $target = $('.box-target')
     if($target.isVisible()) {
         isLoad($target)
     }
})

• 图片懒加载的原理是什么
  1. 图片懒加载实际上是叫图片的延迟加载
  2. 目的是为了优化页面的渲染速度,出现在用户可视范围内的图片才加载
  3. 实现原理
     图片可以先使用一张占位图片显示,真实的图片地址保存在一个自定义的属性当中,当图片出现在窗口的可是范围的时候,就将真实的地址替换掉占位图片的地址