懒加载

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

  function isVisible($node){
           var scrollHeight=$(window).scrollTop();//滚动条的高度
           var windowHeight=$(window).height();//浏览器窗口的高度
           var offsetHeight=$($node).offset().top;//元素到页面的顶部的偏移
           if(offsetHeightscrollHeight){
               return true;
           }else {
               return false;
           }
    }
 

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

  $(window).on('scroll',function($node){
          var scrollHeight=$(window).scrollTop();
          var windowHeight=$(window).height();
          var offsetHeight=$($node).offset().top;//$node是传入的元素
          if(offsetHeightscrollHeight) {
              console.log("true");
          }
      })

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

  function isLoad($node){
       $(window).on('scroll',function($node){
           var scrollHeight=$(window).scrollTop();
           var windowHeight=$(window).height();
           var offsetHeight=$($node).offset().top;
           if(offsetHeightscrollHeight){
               if($($node).attr('src')===$($node).attr('data-src')) {
                   return true;
               }else {
                   $($node).attr('src',$($node).attr('data-src'));
                   console.log('true');
               }
           }
       });
   }

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

如果网页的图片过多，全部加载的时候，会很慢，用户体验不好，为了使网页加载速度更快，我们就先加载出现在浏览器窗口的图片，不在窗口范围内的图片，等滚动到的时候再加载，这样页面的加载速度会提高很多。
实现原理是这样的，把图片的真实地址放到图片的一个自定义属性上，一般是data-src,图片的src放的是指向一张空白图片的地址，当页面加载时判断图片位置是否出现在了可视区域内。如果出现在可视区域了那么就把data-src的真实地址赋值给src,加载之后的图片不再做处理。

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

预览
代码