懒加载的原理及实现
2017-08-31 22:16
302 查看
懒加载的原理
原理:先将img标签中的src链接设为同一张图片(空白图片),将其真正的图片地址存储再img标签的自定义属性中(比如data-src)。当js监听到该图片元素进入可视窗口时,即将自定义属性中的地址存储到src属性中,达到懒加载的效果。
好处:这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢,页面卡顿或崩溃等问题。
既然懒加载的原理是基于判断元素是否出现在窗口可视范围内,首先我们写一个函数判断元素是否出现在可视范围内:
再添加上浏览器的事件监听函数,让浏览器每次滚动就检查元素是否出现在窗口可视范围内:
我们已经很接近了,现在我们要做的是,让元素只在第一次被检查到时打印true,之后就不再打印了
利用懒加载和AJAX,我们还可以实现无限滚动查看时间线的效果
原理:先将img标签中的src链接设为同一张图片(空白图片),将其真正的图片地址存储再img标签的自定义属性中(比如data-src)。当js监听到该图片元素进入可视窗口时,即将自定义属性中的地址存储到src属性中,达到懒加载的效果。
好处:这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢,页面卡顿或崩溃等问题。
代码实现
既然懒加载的原理是基于判断元素是否出现在窗口可视范围内,首先我们写一个函数判断元素是否出现在可视范围内:function isVisible($node){ var winH = $(window).height(), scrollTop = $(window).scrollTop(), offSetTop = $(window).offSet().top; if (offSetTop < winH + scrollTop) { return true; } else { return false; } }
再添加上浏览器的事件监听函数,让浏览器每次滚动就检查元素是否出现在窗口可视范围内:
$(window).on("scroll", function{ if (isVisible($node)){ console.log(true); } })
我们已经很接近了,现在我们要做的是,让元素只在第一次被检查到时打印true,之后就不再打印了
var hasShowed = false; $(window).on("sroll",function{ if (hasShowed) { return; } else { if (isVisible($node)) { hasShowed = !hasShowed; console.log(true); } } })
无限滚动
利用懒加载和AJAX,我们还可以实现无限滚动查看时间线的效果
回到顶部
利用懒加载的原理,我们还可以实现在滚动页面一段距离后,出现回到顶部按钮的这种效果
相关文章推荐
- Java类加载原理解析及怎样自定义Java类实现特殊的功能
- 前端性能优化之 —— 图片延迟加载 (原理以及实现方式)
- 图片懒加载原理及实现
- has实现 更新视图但不重新加载页面原理
- Android 5.X新特性之为RecyclerView添加下拉刷新和上拉加载及SwipeRefreshLayout实现原理
- ThreadLocal的实现原理,及使用实例,解决spring,hibernate非web项目下的懒加载 no session or session was closed(1)!
- 使用requireJS加载不符合AMD规范的js文件:shim的使用方式和实现原理
- 下拉刷新、上拉加载更多控件实现原理及解析(一)
- 下拉刷新、上拉加载更多控件实现原理及解析(二)
- web前端图片懒加载实现原理
- android 加载大图的原理和实现
- WordPress实现HTML5预加载与加载原理
- 图片延迟加载(lazyload)的实现原理
- 图片延迟加载(lazyload)的实现原理
- 延迟加载Dll的实现原理
- Objective-c 下拉刷新,上拉加载实现原理
- 加强2注解。泛型。类加载器及其委托机制。代理的概念与作用原理,AOP概念。实现AOP功能的封装与配置。类似Spring。
- JVM类加载的原理及实现基础教程
- Android中apk加固完善篇之内存加载dex方案实现原理(不落地方式加载)
- hibernate延迟加载的原理与实现