1、懒加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>图片懒加载</title>
<style>
* {
padding: 0;
margin: 0;
}
/* .img-container {
} */
img {
width: 100%;
height: 183px;
}
</style>
</head>
<body>
<div class="img-container">
<img
src="./images/loading.gif"
alt=""
data-src="./images/1.jpg"
class="lazyload"
/>
</div>
<div class="img-container">
<img
src="./images/loading.gif"
alt=""
data-src="./images/2.jpg"
class="lazyload"
/>
</div>
<div class="img-container">
<img
src="./images/loading.gif"
alt=""
data-src="./images/3.jpg"
class="lazyload"
/>
</div>
<div class="img-container">
<img
src="./images/loading.gif"
alt=""
data-src="./images/4.jpg"
class="lazyload"
/>
</div>
<div class="img-container">
<img
src="./images/loading.gif"
alt=""
data-src="./images/5.jpg"
class="lazyload"
/>
</div>
<script>
// 2.图片懒加载的实现
// 图片要设置高度
const imgs = [...document.querySelectorAll('.lazyload')];
// console.log(imgs);
lazyload();
// window.addEventListener('scroll', lazyload, false);
window.addEventListener('scroll', debounce(lazyload), false);
// 不适用
// window.addEventListener('scroll', throttle(lazyload), false);
function lazyload() {
console.log('lazyload');
for (let i = 0; i < imgs.length; i++) {
const $img = imgs[i];
if (isInVisibleArea($img)) {
$img.src = $img.dataset.src;
imgs.splice(i, 1);
i--;
}
}
}
// DOM 元素是否在可视区域内
function isInVisibleArea($el) {
const rect = $el.getBoundingClientRect();
// console.log(rect);
return (
rect.bottom > 0 &&
rect.top < window.innerHeight &&
rect.right > 0 &&
rect.left < window.innerWidth
);
}
// 防抖 debounce
// 在某个时间期限内，事件处理函数只执行一次
function debounce(fn, miliseconds = 250, context) {
let timer = null;
return function (...args) {
const self = context || this;
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
fn.apply(self, args);
timer = null;
}, miliseconds);
};
}
</script>
</body>
</html>
2、预加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>图片预加载</title>
<style>
.img-container {
display: flex;
align-items: center;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
}
img {
width: 100%;
}
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="img-container">
<img src="./images/1.jpg" alt="图片" id="img" />
</div>
<script>
// 1.什么是图片预加载
// 提前加载将来可能会用到的图片
// 2.图片预加载的实现
const imgs = [
'./images/2.jpg',
'./images/3.jpg',
'./images/4.jpg',
'./images/5.jpg'
];
let i = 0;
const $img = document.getElementById('img');
preload(imgs[i])
.then(data => {})
.catch(() => {});
// 点击切换
$img.addEventListener(
'click',
() => {
if (i < imgs.length) {
$img.src = imgs[i];
i++;
if (i < imgs.length) {
preload(imgs[i]);
}
} else {
console.log('已经是最后一张了！');
}
},
false
);
// 预加载
function preload(src) {
return new Promise((resolve, reject) => {
const image = new Image();
image.addEventListener('load', () => resolve(image), false);
image.addEventListener('error', () => reject, false);
image.src = src;
});
}
</script>
</body>
</html>
