懒加载的原理及实现

2017-01-14 08:48:32来源:CSDN作者:weixin_35955795人点击

懒加载的原理

  • 原理:先将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)) {            console.log(true);        }    }})

咦,我们好像已经实现了懒加载。
下面是我的实现:

  • 展示、代码

无限滚动

利用懒加载和AJAX,我们还可以实现无限滚动查看时间线的效果,下面是我的实现:
- 展示、代码

回到顶部

利用懒加载的原理,我们还可以实现在滚动页面一段距离后,出现回到顶部按钮的这种效果,下面是我的实现
- 展示、代码

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台