jQuery 懒加载

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

function isVisible($node){
var $nodeH=$node.offset( ).Top,
      $windowH=$(window).height( ),
      $scrollH=$(window).scrollTop( ）;
if($nodeH < ($windowH+$scrollH) && $nodeH>$scrollH){
           return true; }
    else{
        return fales;
    }

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

$(window).on('scroll',function( ){
    var $scrollH=$(this).scrollTop( );
    function isVisible($node){
    var $nodeH=$node.offset( ).Top,
      $windowH=$(window).height( );
if($nodeH < ($windowH+$scrollH) && $nodeH>$scrollH){
           return console.log( 'true' ); }
    else{
        return console.log( 'false' );
    }
})

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

$(window).on('scroll',function( ){
    var $scrollH=$(this).scrollTop( );
    function isVisible($node){
    var $nodeH=$node.offset( ).Top,
      $windowH=$(window).height( );
if($nodeH < ($windowH+$scrollH) && $nodeH>$scrollH){
        if(!isload( )){
        return console.log( 'true' );
        $node.attr('data-load','true')
 }else{
      return;
    }
})

function  isload( ){
    return $node.attr('data-load');
}

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

将图片的src属性值先不设置，而是放在一个自定义属性内。当图片位置达到相关需求时（一般为在浏览器中出现），再来添加src属性值，达到图片出现的方法。主要目的是为了减少同时加载多张图片的压力，有需求在加载，优惠网页性能。