jQuery懒加载

问答

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

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

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

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

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

   

       

       

       

       

       

       

       

       

   
   
1
   

       

       

       

       

       

       

       

       

   
   
   

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

当页面中有较多图片时，由于要加载大量图片，可能导致页面卡顿。所以，对于非可视范围的图片，暂时不加载，等到其滚动到可视范围内时，再行加载。
原理：将图片地址保存在自定义属性内，然后将页面img标签获取并保存，开启一个定时器，遍历保存的img标签， 判断其位置是否出现在了可视区域内。如果出现在可视区域了那么就把真实的src地址给赋值上。 并且从数组中删除，避免重复判断。

代码

1. 实现如下回到顶部效果:当页面滚动到一定距离时，窗口右下角会出现回到顶部按钮，点击按钮页面会滚动到顶部。效果预览

2. 实现如下图片懒加载效果 效果预览

3. 实现如下无限滚动效果。当页面滚动会无限加载数据展示到页面。当鼠标放置上去会变色提示：当底部加载更多按钮出现时，通过 ajax 发送请求获取数据，append 到容器里。事件绑定使用代理方式。效果预览

本文版权归本人（帘外修竹）所有，转载须说明来源