懒加载的原理与实现
懒加载的原理
- 原理：先将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);
}
}
})
咦，我们好像已经实现了懒加载。
下面是我的实现：
- 展示、代码
-
demo lazyload - 锐客网 * { padding: 0; margin: 0; text-decoration: none; list-style: none; } .layout { margin: 0 auto; width: 1000px; } .lazyload img { width: 300px; height: 400px; } .img-ct { margin-left: -50px; overflow: auto; } .item { float: left; margin-left: 50px; margin-bottom: 30px; }
文章图片
-
文章图片
-
文章图片
-
文章图片
-
文章图片
-
文章图片
-
文章图片
-
文章图片
-
文章图片
-
文章图片
-
文章图片
-
文章图片
-
文章图片
-
文章图片
利用懒加载和AJAX，我们还可以实现无限滚动查看时间线的效果，下面是我的实现：
- 展示、代码
【懒加载的原理与实现】
* {
text-align: center;
}
.box {
border: 1px solid #ccc;
padding: 10px;
margin: 10px;
}
.box:hover {
background-color: green;
}
.btn {
border: 1px solid #e27272;
border-radius: 2px;
color: #e27272;
padding: 10px;
margin: 10px;
display: inline-block;
cursor: pointer;
width: 64px;
height: 18px;
text-align: center;
}
.btn img {
width: 18px;
}
内容1
内容2
加载更多
回到顶部
利用懒加载的原理，我们还可以实现在滚动页面一段距离后，出现回到顶部按钮的这种效果，下面是我的实现
- 展示、代码
.gotop li {
height: 50px;
line-height: 50px;
}
#go-top {
position: fixed;
bottom: 10px;
right: 10px;
border: 1px solid red;
padding: 10px;
cursor: pointer;
display: none;
}
推荐阅读
- 热闹中的孤独
- JAVA（抽象类与接口的区别&重载与重写&内存泄漏）
- 放屁有这三个特征的，请注意啦！这说明你的身体毒素太多
- 一个人的旅行，三亚
- 布丽吉特，人生绝对的赢家
- 慢慢的美丽
- 尽力
- 一个小故事，我的思考。
- 家乡的那条小河
- 《真与假的困惑》???|《真与假的困惑》??? ——致良知是一种伟大的力量