当前位置:Gxlcms > JavaScript > 实现jquery懒加载、回到顶部

实现jquery懒加载、回到顶部

时间:2021-07-01 10:21:17 帮助过:15人阅读

本篇教你如何实现jquery的懒加载会到顶部。

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

  1. function isVisible($node){ var winH = $(window).height(),
  2. winS = $(window).scrollTop(),
  3. nodeHeight = $node.height(),
  4. nodeTop = $node.offset().top; if(winH + winS >= nodeTop && winS < nodeTop + nodeHeight){ return true;
  5. }else{ return false;
  6. }
  7. }

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

  1. function isVisible($node){
  2. $(window).on('scroll',function(){ var winH = $(window).height(),
  3. winS = $(window).scrollTop(),
  4. nodeHeight = $node.height(),
  5. nodeTop = $node.offset().top; if(winH + winS >= nodeTop && winS < nodeTop + nodeHeight ){ console.log(true);
  6. }else{ console.log(false);
  7. }
  8. });
  9. }

isVisible($node);

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

  1. function isVisible($node){
  2. $(window).on('scroll',function(){ var winH = $(window).height(),
  3. winS = $(window).scrollTop(),
  4. nodeHeight = $node.height(),
  5. nodeTop = $node.offset().top; if(winH + winS >= nodeTop && winS < nodeTop + nodeHeight ){ if(!$node.attr("data-sc")){ console.log(true);
  6. $node.attr("data-sc",true);
  7. }else{ return;
  8. }
  9. }else{ return;
  10. }
  11. });
  12. }
  13. isVisible($node);

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

在页面载入的时候将页面的img的地址指向一个小的的同样的白色图片,将真实的图片地址放在创建的自定义属性中如:

  1. <img src="small.png" data-src="true.png">


src为小图地址,data-src为真实地址。
当图片出现在窗口可视区域时,将自定义属性里的真实图片地址赋给src为懒加载的实现原理。

本篇对jquery进行了讲解,更多相关内容请关注Gxl网。

相关推荐:

关于this的相关问题

JS数组、字符串及数学函数

关于JS时间对象和递归问题

以上就是实现jquery懒加载、回到顶部的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行