图片懒加载和预加载
懒加载
什么是懒加载？
简单一点来说就是图片延迟加载，就是当加载图片的时候，先用一张本地的占位符图片替代img元素的src值，当达到某个条件的时候，再去设置图片的真实路径
懒加载的原理？
页面中的img标签，如果没有设置src属性，就不会去加载图片；只有通过javascript修改了img的src属性，浏览器才会去发送请求；懒加载的原理就是先将页面中的图片都统一用一张本地图片进行占位，把真正的图片路径存在data-url（这个名字可以自己取）属性里面，当需要显示图片的时候，再将imgd的src属性设置为data-url的值；
图片懒加载方式
- 延时加载，可利用setInterval后者setTimeOut
- 触发了某些事件加载
- 是否出现在可视区域加载（详细实现思路可看下面 的代码）
实现图片懒加载的步骤
- img的src属性置为空，将真实的图片路径保存在data-url里面
- 当图片出现在屏幕的可视区域内（这只是其中一个条件，即满足特定的条件），将存放在data-url里面的路径拿出来存放到scr属性中
window.onscroll = function() {
// 获取页面中的img标签
const imgs = Array.prototype.slice.call(document.getElementsByTagName('img')); // 将NodeList转换成数组
imgs.forEach(img => {
const { top, bottom } = img.getBoundingClientRect(); // 获取每个img标签的位置
const clientHeight = document.documentElement.clientHeight;
const scrollTop = document.documentElement.scrollTop;
// 判断img标签的top是否小于滚动条+页面可视区域的高度，如果小于，则说明img已经出现在了可视区域，反之则没有
if (top <= clientHeight + screenTop) {
img.setAttribute('src', img.getAttribute('data-url'));
}
});
}
预加载
什么是预加载
预加载就是提前把资源加载好，当加载图片展示路径的时候直接从缓存中取
预加载的原理
让img标签的scr属性先存放其他图片，最好是本地的，加载快，当真实路径全部加载完成后，再将src属性替换成缓存的路径
图片懒加载方式
- css，background-image的方式
- js的preload的
图片预加载实现代码
const urls = ['http://seopic.699pic.com/photo/50035/0520.jpg_wh1200.jpg','http://seopic.699pic.com/photo/50035/0520.jpg_wh1200.jpg','http://seopic.699pic.com/photo/50035/0520.jpg_wh1200.jpg',]
const preload = () => {
urls.forEach(url => {
const newImg = new Image();
newImg.src = url;
newImg.addEventListener('load', function() {
console.log('img' + url + '加载完毕');
})
});
}
window.onload = function() {
preload(urls);
}
懒加载和预加载的对比
- 都是为了提高用户体验
- 懒加载对服务器前端有一定的减压作用
- 预加载会增加服务器前端的压力
