懒加载
2018-07-03 本文已影响0人
Augenstern___
懒加载原理为：基于判断元素是否出现在窗口可视范围内 先将img标签中的src链接设为同一张图片（空白图片），将其真正的图片地址存储再img标签的自定义属性中（比如data-src）。当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。
这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢，页面卡顿或崩溃等问题。
1.写一个函数来判断元素是否出现在可视范围内
function isVisible($node){
var winH = $(window).height(),
scrollTop = $(window).scrollTop(),
offSetTop = $(window).offSet().top;
if (offSetTop < winH + scrollTop) {
return true;
} else {
return false;
}
}
2.添加上浏览器的事件监听函数，让浏览器每次滚动就检查元素是否出现在窗口可视范围内
$(window).on("scroll", function{
if (isVisible($node)){
console.log(true);
}
})
3.让元素只在第一次被检查到时打印true，之后就不再打印了
var hasShowed = false;
$(window).on("sroll",function{
if (hasShowed) {
return;
} else {
if (isVisible($node)) {
hasShowed = !hasShowed;
console.log(true);
}
}
})1
备注案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="" class="image-item" lazyload="true" data-
original="http://pic26.nipic.com/20121213/6168183_004444903000_2.jpg" />
</body>
<script>
var viewHeight = document.documentElement.clientHeight // 可视区域的高度 947
function lazyload () {
// 获取所有要进行懒加载的图片
var eles = document.querySelectorAll('img[data-original][lazyload]')
Array.prototype.forEach.call(eles, function (item, index) {
var rect
if (item.dataset.original === '')
return
rect = item.getBoundingClientRect()
// 图片一进入可视区，动态加载
if (rect.bottom >= 0 && rect.top < viewHeight) {
!function () {
var img = new Image()
img.src = item.dataset.original
img.onload = function () {
item.src = img.src
}
item.removeAttribute('data-original')
item.removeAttribute('lazyload')
}()
}
})
}
// 首屏要人为的调用，否则刚进入页面不显示图片
lazyload()
document.addEventListener('scroll', lazyload)
</script>
</html>
