jQuery实现懒加载

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

 function isVisible($node){
     var windowHeight = $(window).height(),
           scollTop = $(window).scollTop(),
           offsetTop = $node.offset().top,
           nodeHeight = $node.outerHeight(true);
     if( windowHeight + scollTop > offsetTop && offsetTop < scollTop + nodeHeight ) {
           return true;
     } else {
           return false;
     }
 }

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

代码实例

$box = $('.box');
$(window).on('scroll', function() {
  if(isVisible($box)) {
    console.log(true);
  } else {
    console.log(false);
  }
});
 function isVisible($node){
     var windowHeight = $(window).height(),
           scrollTop = $(window).scrollTop(),
           offsetTop = $node.offset().top,
           nodeHeight = $node.outerHeight(true);
     if( windowHeight + scrollTop > offsetTop && scrollTop < offsetTop + nodeHeight ) {
           return true;
     } else {
           return false;
     }
 }

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

代码实例

$box = $('.box');
$(window).on('scroll', function() {
  if(isVisible($box)) {
    console.log(true);
  } else {
    console.log(false);
  }
});
 function isVisible($node){
     var windowHeight = $(window).height(),
           scrollTop = $(window).scrollTop(),
           offsetTop = $node.offset().top,
           nodeHeight = $node.outerHeight(true);
     if( windowHeight + scrollTop > offsetTop && scrollTop < offsetTop + nodeHeight ) {
           return true;
     } else {
           return false;
     }
 }

题目4： 图片懒加载的原理是什么？

• img 标签只要 src 属性上有图片的地址，图片就会立即加载。
• 所以图片懒加载的原理就是先把图片地址放在自定义属性 data-src 上，然后通过检测图片是否在窗口可视范围内，如果是则把 data-src 上的地址赋值给 src，加载图片。

题目5： 实现视频中的图片懒加载效果

实例效果

Github代码

主要还是看代码把，把在github上预览效果好像图片特别容易加载失败...

然后原因应该是图片归属网站防外链的问题，解决方法是代码加上了<meta name="referrer" content="no-referrer">,图片就能正常加载

image.png

题目6： 实现视频中的新闻懒加载效果

github代码