1.概念
(1) 懒加载(延迟加载):图片延迟加载,当图片进入视口之后才加载
(2) 预加载:提前加载图片,当用户需要查看时,直接从本地缓存读取
在实际开发者中懒加载用的比较多
2.区别
二者都是提高页面性能的有效办法
区别是一个是提前加载,一个是延迟加载甚至不加载
懒加载对服务器前端有一定的缓解压力的作用,预加载则会增加服务器前端的压力
3.意义
(1) 懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数。
(2) 预加载可以说是牺牲服务器前端性能,换取更好的用户体验,这样可以使用户的操作得到最快的反映
懒加载的原理
1.将页面上的图片src属性设置为空,然后将图片的真实路径存放在当前图片标签的自定义属性data-src上
2.当页面滚动的时候,需要去监听scroll事件,在scroll事件的回调中,判断我们的懒加载的图片是否进入可视区域,如果图片在可视区域就将图片的src属性设置为data-src的值,然后这样就实现延迟加载
css样式
.image-item {
display: block;
margin-bottom: 50px;
height: 200px;
/* 一定记得设置图片高度 */
}
body部分
<img src="" class="image-item" lazyload="true" data-src="https://image.ztemall.com/e96bedfde1da7fe4430015588ded9e55.jpg">
<img src="" class="image-item" lazyload="true" data-src="https://image.ztemall.com/f4eb114554ae8d3d11a11bf0fa436b4a.jpg">
<img src="" class="image-item" lazyload="true" data-src="https://image.ztemall.com/4a8fb03ec68c9fa2fdc95a6f40b9f781.jpg">
<img src="" class="image-item" lazyload="true" data-src="https://image.ztemall.com/4040bc0eca9d1e416fdf92c15e44b932.jpg">
<img src="" class="image-item" lazyload="true" data-src="https://image.ztemall.com/5c428b3ec1963741846e674ef27f7fe2.jpg">
<img src="" class="image-item" lazyload="true" data-src="https://image.ztemall.com/2d5a291001b0a7dcb7b41d5a990224c1.jpg">
<img src="" class="image-item" lazyload="true" data-src="https://image.ztemall.com/e96bedfde1da7fe4430015588ded9e55.jpg">
<img src="" class="image-item" lazyload="true" data-src="https://image.ztemall.com/e96bedfde1da7fe4430015588ded9e55.jpg">
<img src="" class="image-item" lazyload="true" data-src="https://image.ztemall.com/e96bedfde1da7fe4430015588ded9e55.jpg">
<img src="" class="image-item" lazyload="true" data-src="https://image.ztemall.com/e96bedfde1da7fe4430015588ded9e55.jpg">
<img src="" class="image-item" lazyload="true" data-src="https://image.ztemall.com/e96bedfde1da7fe4430015588ded9e55.jpg">
<img src="" class="image-item" lazyload="true" data-src="https://image.ztemall.com/e96bedfde1da7fe4430015588ded9e55.jpg">
js部分
//获取可视区高度
var viewHeight = document.documentElement.clientHeight;
function lazyload() {
var eleImgs = document.querySelectorAll('img[data-src][lazyload]');
eleImgs.forEach(function(item, index) {
//如果data-src属性没有值,直接返回
if (item.dataset.src === "")
return;
// 用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置
var rect = item.getBoundingClientRect();
if (rect.bottom >= 0 && rect.top < viewHeight) {
(function() {
var img = new Image();
img.src = item.dataset.src;
img.onload = function() {
item.src = img.src;
}
item.removeAttribute("data-src"); //移除属性,下次不再遍历
item.removeAttribute("lazyload");
})()
}
})
}
lazyload(); //刚开始还没滚动屏幕时,要先触发一次函数,初始化首页的页面图片
document.addEventListener("scroll", lazyload);
预加载原理:提前加载图片,当用户需要查看时,直接从本地缓存读取
实例
<!-- HTML -->
<img src="https://image.ztemall.com/e96bedfde1da7fe4430015588ded9e55.jpg" style="display:none" />
<!-- css -->
<div class="box"></div>
<!-- js -->
<div class="hidden">
<script type="text/javascript">
var img = new Array()
function preload() {
for (i = 0; i < preload.arguments.length; i++) {
img[i] = new Image()
img[i].src = preload.arguments[i]
}
}
preload(
"https://image.ztemall.com/e96bedfde1da7fe4430015588ded9e55.jpg",
"https://image.ztemall.com/5c428b3ec1963741846e674ef27f7fe2.jpg",
"https://image.ztemall.com/4040bc0eca9d1e416fdf92c15e44b932.jpg"
)
</script>
</div>
<!-- AJAX -->
<!-- 使用Ajax,比直接使用JavaScript,优越之处在于JavaScript和CSS的加载不会影响到当前页面。该方法简洁、高效。 -->
<div class="ajax">
<script>
window.onload = function() {
setTimeout(function() {
var xhr = new XMLHttpRequest();
//预加载js文件
xhr.open('GET', 'https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js');
xhr.send('');
xhr = new XMLHttpRequest();
//预加载 css 文件
xhr.open('GET', 'https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css');
xhr.send('');
// 预加载图片
new Image().src = "https://image.ztemall.com/4040bc0eca9d1e416fdf92c15e44b932.jpg";
}, 1000);
};
</script>
</div>