点击上方蓝字关注「悲伤日记」
愿我如星君如月 夜夜流光相皎洁
1.什么是懒加载?
图片懒加载是一种网页优化技术。图片作为一种网络资源,在被请求时也与普通静态资源一样,将占用网络资源,而一次性将整个页面的所有图片加载完,将大大增加页面的首屏加载时间。为了解决这种问题,通过前后端配合,使图片仅在浏览器当前视窗内出现时才加载该图片,达到减少首屏图片请求数的技术就被称为“图片懒加载”。
2.什么是预加载?
资源预加载是另一个性能优化技术,我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。预加载简单来说就是将所有所需的资源提前请求加载到本地,这样后面在需要用到时就直接从缓存取资源。
懒加载
html
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Documenttitle><link rel="stylesheet" href="lazyload.css">head><body><div class="image-list"><img src="" class="image-item" lazyload="true" data-original="https://img.alicdn.com/imgextra/i2/252339290/TB29PYUXnIlyKJjSZFrXXXn2VXa_!!252339290-0-beehive-scenes.jpg_180x180xzq90.jpg_.webp" alt=""><img src="" class="image-item" lazyload="true" data-original="https://img.alicdn.com/imgextra/i4/2260152888/O1CN01vw2e251XCkJr0VPZU_!!2260152888-0-beehive-scenes.jpg_250x250xz.jpg" alt=""><img src="" class="image-item" lazyload="true" data-original="https://img.alicdn.com/imgextra/i3/24687421/TB2Xg1izsyYBuNkSnfoXXcWgVXa_!!24687421-0-beehive-scenes.jpg_250x250xz.jpg" alt=""><img src="" class="image-item" lazyload="true" data-original="https://img.alicdn.com/imgextra/i4/890151842/TB2II1mnZbI8KJjy1zdXXbe1VXa_!!890151842-0-beehive-scenes.jpg_250x250xz.jpg" alt=""><img src="" class="image-item" lazyload="true" data-original="https://img.alicdn.com/imgextra/i2/2096513830/TB2l1W0kRnTBKNjSZPfXXbf1XXa_!!2096513830-0-beehive-scenes.jpg_250x250xz.jpg" alt=""><img src="" class="image-item" lazyload="true" data-original="https://img.alicdn.com/imgextra/i3/2586222636/TB2RDGrpqAoBKNjSZSyXXaHAVXa_!!2586222636-0-daren.jpg_250x250xz.jpg" alt=""><img src="" class="image-item" lazyload="true" data-original="https://img.alicdn.com/imgextra/i2/1870112525/TB2Ae.xbOwIL1JjSZFsXXcXFFXa_!!1870112525-2-beehive-scenes.png_250x250xz.jpg" alt=""><img src="" class="image-item" lazyload="true" data-original="https://img.alicdn.com/imgextra/i2/2194952831/TB2PwWty7qvpuFjSZFhXXaOgXXa_!!2194952831-0-beehive-scenes.jpg_250x250xz.jpg" alt="">div><script src="./lazyload.js">script>body>html>
css
.image-item {
display: inline-block;
width: 100%;
height: 300px;
background: gray;
}
js
var viewHeight = document.documentElement.clientHeight;
function lazyload() {
var imgs = document.querySelectorAll('img[data-original][lazyload]');
imgs.forEach(item => {
if (item.dataset.original == '') {
return;
}
var rect = item.getBoundingClientRect();
if (rect.bottom >= 0 && rect.top < viewHeight) {
var img = new Image();
img.src = item.dataset.original;
console.log(img.src)
img.onload = function() {
item.src = img.src;
}
item.removeAttribute('data-original');
item.removeAttribute('lazyload')
}
})
}
lazyload();
document.addEventListener('scroll', lazyload)
效果
蓝色为已经请求加载的图片
红色为还没有请求加载的图片
默认打开,没有操作前
向下滚动前
向下滚动后
冷门属性
ocument.addEventListener(事件监听)
document.addEventListener('scroll', function() {
console.log('aa')
})
dataset
用`dataset.original`获取`data-original` 的属性
img.onload
事件在图片加载完成后立即执行
getBoundingClientRect
用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性
文档各种高度
document.documentElement.clientHeight
:视口的大小document.documentElement.scrollHeight
:文档的大小document.documentElement.offsetHeight
:文档的大小
预加载
标签
<img style="display:none;" src="https://img.alicdn.com/imgextra/i4/2260152888/O1CN01vw2e251XCkJr0VPZU_!!2260152888-0-beehive-scenes.jpg_250x250xz.jpg" alt="">
new Image()
var image = new Image();
image.src = 'https://img.alicdn.com/imgextra/i4/2260152888/O1CN01vw2e251XCkJr0VPZU_!!2260152888-0-beehive-scenes.jpg_250x250xz.jpg';
<script src='./myPreload.js'>script>
xml
<script src="https://cdn.bootcss.com/PreloadJS/1.0.1/preloadjs.min.js">
script>
<script>var queue = new createjs.LoadQueue();
queue.installPlugin(createjs.Sound);
queue.on("complete", handleComplete, this);
queue.loadFile({id: "sound",src: "http://path/to/sound.mp3"
});
queue.loadManifest([{id: "myImage",src: "path/to/myImage.jpg"
}]);function handleComplete() {
createjs.Sound.play("sound");var image = queue.getResult("myImage");document.body.appendChild(image);
}script>