懒加载

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

function isVisible($node){
  var scrollTop = $(window).scrollTop(); //滑动高度
  var windowHeight = $(window).height(); //可视高度
  var offsetTop = $node.offset().top //元素位置高度
  //如果元素距顶部的距离小于 滚动距离+Window高度，并且高度小于滚动
  if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop){
    return true;
  }
  return false;
}

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

var toggle = true; //设置一个开关

//判断是否出现在窗口可视范围的函数
function isVisible($node){
  var scrollTop = $(window).scrollTop(); //滑动高度
  var windowHeight = $(window).height(); //可视高度
  var offsetTop = $node.offset().top //元素位置高度
  //如果元素距顶部的距离小于 滚动距离+Window高度，并且高度小于滚动
  if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop){
    return true;
  }
  return false;
}

$(window).on('scroll',function(){
  if(isVisible($('.box1'))){ //判断元素是否可视
    if(toggle){
      console.log('true');
      toggle = false;
    }
  }else{
    toggle = true;
  }
})

效果预览

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

var toggle = true;

function isVisible($node){
  var scrollTop = $(window).scrollTop(); //滑动高度
  var windowHeight = $(window).height(); //可视高度
  var offsetTop = $node.offset().top; //元素位置高度
  if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop){
    return true;
  }
  return false;
}

$(window).on('scroll',function(){
  if(toggle && isVisible($('.box1'))){
    console.log('true');
    toggle = false;
  }
})

效果预览

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

懒加载即延迟，对于图片过多的页面，为了加快页面加载速度，将页面内未出现在可视区域内的图片先加载，等到滚动到可视区域后再加载。从而提升页面加载性能，提高了用户体验。

原理：

• 在页面载入时将img标签內的src指向空或者占位图，将真实地址存放于自定义属性或者数组中；
• 当页面滑动的时候检查所有的img元素，看看是否在可视窗口以内，如果在视野内在看看是否加载过，没有的加载的话就加载图片

实现图片懒加载效果

预览地址

实现一个瀑布流布局效果

瀑布流布局

实现一个新闻瀑布流新闻网站

瀑布流新闻网站