懒加载

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

function isVisible($node){
      var winH=$(window).height()
      var scrH=$(window).scrollTop()
      var offH=$node.offset().top
      var nodeH=$node.height()
 
      if(offH

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




  
  
  
  Document
  


  

hello

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


   


  

hello

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

  1. 对于所有img标签,把真实地址放入自定义属性中
  2. 当滚动页面时,检查所有img标签,看这个标签是否出现到我们视野中,当出现在视野中,再去判断他是否已经加载过,若没加载,则加载他

懒加载的目的:当一个页面有大量图片和内容时,网站为了节省流量,可以去做一个判断:当用户想看的时候再加载内容给他。同时也加快了用户打开网站的速度,提升用户体验

你可能感兴趣的:(懒加载)