按需加载
为什么要做性能优化?
1、加快页面展示和运行速度(增强用户体验)
2、节约服务器带宽流量
3、减少服务器压力
什么是按需加载
按需加载是前端性能优化的一大措施。顾名思义,按需加载就是根据需要去加载资源。比如在html代码中我们会使用img标签来插入图片,而加载图片需要时间,一旦图片过多过大,就需要用户等待很长时间才能将页面加载出来。因此我们可以用体积较小的占位图来代替暂时不需要展示的图片,以此来减少加载时间。
很明显占位图比正常图片小很多,这样就可以减少加载时间
按需加载思路
思路: 在鼠标滚动时,计算图片距浏览器顶部的距离, 再与页面可视区高度与滚动条滚动距离之和作比较, 如果大于,就说明还不需要被加载, 如果小于或等于就说明用户即将看到图片,这个时候就需要加载正常图片.
document.documentElement.scrollTop || document.body.scrollTop用于获取滚动距离
document.documentElement.clientHeight用于获取可视区高度
imgs[i].offsetTop用于获取图片距浏览器顶部的距离
代码
<!DOCTYPE html>
<htm