一、实现懒加载
又称为延迟加载、按需加载。
指的是图片在页面渲染的时候先不加载,页面渲染完成后在指定动作触发后再加载图片。
实现的原理是:
先将图片的实际src,记录在data-set属性中。
监听屏幕滚动,计算图片的Y坐标,并计算可视区域的高度height,当Y小于等于(height+scrollTop)时,图片的src的值用data-src的来替换,从而来实现图片的懒加载。
1、引用框架JQuery
图片的src是data-src
$('ul li img').lazyload({
effect:'fadeIn"
})
lazyload()方法具有懒加载效果:
effetct 淡入淡出效果 fadeIn 图片默认效果
2、原生
原理:按需加载,实现类似于分页的效果。
添加滚动条事件,判断滚动条是否在底部。当滚动条到达底部的时候,页数加1,后台回来的数据合并之前存在的数据展示在页面上。
① 如果判断滚动条到达底部了?
“当前可视区域的高度+滚动条距离顶部的高度 >= 页面的高度” 的时候,说明滚动条到达底部了。为了避免临界值的问题,应该将前面两个数值进行向上取整
当前可视区域的高度$(window).height()
页面的高度$(document).height()
滚动条距离顶部的高度$(window).scrollTop()
② demo
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>懒加载</title>
<style>
img {
display: block;
margin-bottom: 50px;
height: 200px;
width: 400px;
}
</style>
</head>
<body>
<img src="./img/0.png" data-src="./img/1.png" />
<img src="./img/0.png" data-src="./img/2.png" />
<img src="./img/0.png" data-src="./img/3.png" />
<img src="./img/0.png" data-src="./img/4.png" />
<img src="./img/0.png" data-src="./img/5.png" />
<img src="./img/0.png" data-src="./img/6.png" />
<img src="./img/0.png" data-src="./img/7.png" />
</body>
<script>
// 图片懒加载
function lazyLoad() {
let viewHeight = window.innerHeight || document.documentElement.clientHeight|| document.body.clientHeight // 获取可视区高度,兼容不同浏览器
console.log('获取可视区高度', viewHeight)
let imgs = document.querySelectorAll('img[data-src]')
imgs.forEach((item, index) => {
if (item.dataset.src === '') return
// 用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置
let rect = item.getBoundingClientRect()
if (rect.bottom >= 0 && rect.top < viewHeight) {
item.src = item.dataset.src
item.removeAttribute('data-src')
}
})
}
window.addEventListener('scroll', lazyLoad)
</script>
</html>
二、图片预加载
- 隐性预加载
先是显性预加载(钱币小图标Loding)快速地呈现部分画面(截图右部分)给用户,再通过互动(向上滑动数钱)来继续分段加载资源
- 显性预加载
处于预加载过程时页面有明确的加载提示,比如进度条或者是Loading图标。
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>懒加载</title>
<style>
img {
display: block;
margin-bottom: 50px;
height: 200px;
width: 400px;
}
</style>
</head>
<body>
<img src="./img/0.png" alt="" class="preLoadImg">
<img src="./img/0.png" alt="" class="preLoadImg">
<img src="./img/0.png" alt="" class="preLoadImg">
</body>
<script>
// 图片预加载
let images = document.querySelectorAll('.preLoadImg')
function preload() {
let imgLength = arguments.length
for (i = 0; i < imgLength; i++) {
images[i].src = arguments[i]
}
}
preload(
"https://img2.baidu.com/it/u=380068739,540564660&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500",
"https://img2.baidu.com/it/u=2613160854,3715336891&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500",
"https://img1.baidu.com/it/u=426807953,2089152937&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500"
)
</script>
</html>