阅读 176

懒加载

懒加载是什么?

延迟加载按需加载

比如随着滚动屏幕渐进式加载图片,而不是一次性加载完所有图片 又比如vue构建项目时,对第三方库(如Element-UI)按需加载相应组件 再比如前端项目打包时,避免单文件过大,进行代码分割

为什么要使用懒加载?它解决了哪些问题?

根据懒加载定义可知,其作用就是延迟加载资源或者按需加载资源,所以它具有以下特点:

1.减少无用资源的加载,减轻了服务器的压力和流量

2.提升用户体验,按需加载图片,可以避免长时间等待所有图片的加载

懒加载的实现原理?

图片的加载是由img标签src属性引起的。

所以可以先将src属性设置为空,再添加一个自定义属性存储需加载的图片地址。当图片需要加载时,将图片地址赋值给src属性,即可实现按需加载。(HTML5中自定义属性为data-xxx形式)

其实现重点在于确定图片什么时候需要加载?

图片加载条件:img.offsetTop < window.innerHeight + document.body.scrollTop
//imgs.offsetTop 是元素顶部距离文档顶部的高度(包括滚动条的距离)
//window.innerHeight 是浏览器可视区的高度
//document.body.scrollTop || document.documentElement.scrollTop 是浏览器滚动的过的距离

复制代码
img

实现懒加载

<div class="container">
    <img src="loading.gif"  data-src="pic.png">
    <img src="loading.gif"  data-src="pic.png">
    <img src="loading.gif"  data-src="pic.png">
    <img src="loading.gif"  data-src="pic.png">
    <img src="loading.gif"  data-src="pic.png">
    <img src="loading.gif"  data-src="pic.png">
</div>
<script>
    let imgs = document.querySelectorAll('img');
    function lazyLoad(){
        let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        let winHeight= window.innerHeight;
        for(l i=0;i < imgs.length;i++){
            if(imgs[i].offsetTop < scrollTop + winHeight ){
                imgs[i].src = imgs[i].getAttribute('data-src');
            }
        }
    }
    window.onscroll = lazyLoad();
</script>

//因为滚动条滚动也是一个高频事件,可以进行节流优化,此文不赘述,留给读者实现
复制代码

懒加载与预加载的区别?

懒加载就是延迟加载、按需加载,当用户需要时再去加载相应资源

预加载是将资源提前加载到本地,使用时从缓存中取资源

补充部分:

1.Element.getBoundingClientRect()

该方法返回元素的大小及其相对于视口的位置。它的top值表示元素左上角到视口顶部的距离

//懒加载的另一种判断条件形式
img.getBoundingClientRect().top < window.innerHeight
复制代码
2.获取屏幕可视窗口大小
//原生方法:
window.innerHeight 标准浏览器及IE9+ 
document.documentElement.clientHeight 标准浏览器及低版本IE标准模式
document.body.clientHeight  低版本混杂模式

//jQuery方法: 
$(window).height()
复制代码
3.获取滚动条滚动的距离
//原生方法:
window.pagYoffset 标准浏览器及IE9+
document.documentElement.scrollTop 兼容ie低版本的标准模式
document.body.scrollTop 兼容混杂模式

//jQuery方法:
$(document).scrollTop()
复制代码
4.获取元素的尺寸
//jQuery:
$(document).offset().top元素距离文档顶的距离
$(document).offset().left元素距离文档左边缘的距离。
//原生方法:
.getoffsetTop()
复制代码

参考资料:

「2021」高频前端面试题汇总之前端性能优化篇 (juejin.cn)

懒加载和预加载 - 简书 (jianshu.com)

文章分类
前端
文章标签