实现jquery懒加载、回到顶部
程序员文章站
2022-04-11 12:17:31
...
本篇教你如何实现jquery的懒加载会到顶部。
如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一个函数 isVisible实现
function isVisible($node){ var winH = $(window).height(), winS = $(window).scrollTop(), nodeHeight = $node.height(), nodeTop = $node.offset().top; if(winH + winS >= nodeTop && winS < nodeTop + nodeHeight){ return true; }else{ return false; } }
当窗口滚动时,判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现
function isVisible($node){ $(window).on('scroll',function(){ var winH = $(window).height(), winS = $(window).scrollTop(), nodeHeight = $node.height(), nodeTop = $node.offset().top; if(winH + winS >= nodeTop && winS < nodeTop + nodeHeight ){ console.log(true); }else{ console.log(false); } }); }
isVisible($node);
当窗口滚动时,判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印true,以后再次出现不做任何处理。用代码实现
function isVisible($node){ $(window).on('scroll',function(){ var winH = $(window).height(), winS = $(window).scrollTop(), nodeHeight = $node.height(), nodeTop = $node.offset().top; if(winH + winS >= nodeTop && winS < nodeTop + nodeHeight ){ if(!$node.attr("data-sc")){ console.log(true); $node.attr("data-sc",true); }else{ return; } }else{ return; } }); } isVisible($node);
图片懒加载的原理是什么?
在页面载入的时候将页面的img的地址指向一个小的的同样的白色图片,将真实的图片地址放在创建的自定义属性中如:
<img src="small.png" data-src="true.png">
src为小图地址,data-src为真实地址。
当图片出现在窗口可视区域时,将自定义属性里的真实图片地址赋给src为懒加载的实现原理。
本篇对jquery进行了讲解,更多相关内容请关注。
相关推荐:
以上就是实现jquery懒加载、回到顶部的详细内容,更多请关注其它相关文章!
推荐阅读
-
Android scrollToTop实现点击回到顶部(兼容PullTorefreshScrollview)
-
jQuery实现拉动页面固定顶部显示且自动消失(火狐)
-
Android之Viewpager+Fragment实现懒加载示例
-
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
-
React 路由懒加载的几种实现方案
-
vue elementUI table表格数据 滚动懒加载的实现方法
-
jQuery实现动态加载(按需加载)javascript文件的方法分析
-
jquery实现在页面加载完毕后获取图片高度或宽度
-
jquery网页回到顶部效果(图标渐隐)
-
Android在多种设计下实现懒加载机制的方法