Java对图片懒加载_记录基于promise实现图片懒加载优化性能

一、场景

项目最近要求对视频进行截图保存、查看，由于项目是公安方面的，导致一天一个控制台会生成很多图片，查看肇事图片的时候，页面一次加载过多导致全部渲染速度很慢，体验不好，于是基于网上现有资料和自己的实践，总结了在项目中的应用。

二、实现过程

1、首先先给img标签src 赋值为loading图片地址，然后添加一个真实要get的图片地址像下面一样

src="./image/loading.jpg"

alt=""

data-src="https://t7.baidu.com/it/u=378254553,3884800361&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1584852523&t=9e0acf70a49bd4f11c073e02c44159d2"

/>

复制代码

2、然后编写window.onload的时候要执行的方法，主要是计算每张图片距离最上视口位置的高度是否大于窗口的高度与滚动条收缩的高度之和。最后使用promise进行图片的异步加载和状态判断，同时监听滚动的时候也要调用懒加载方法。

window.onload = function() {