html图片并行加载，顺序加载，懒加载

最新推荐文章于 2025-06-09 22:33:46 发布

最亮的心

最新推荐文章于 2025-06-09 22:33:46 发布

阅读量8.4k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： js代码 html5 文章标签： html js

本文链接：https://blog.youkuaiyun.com/cs840610862/article/details/77370346

js代码同时被 2 个专栏收录

22 篇文章

订阅专栏

html5

13 篇文章

订阅专栏

本文介绍了一种基于React的懒加载优化方法，通过使用防抖函数减少页面卡顿，并提供了并行与顺序加载图片的实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

懒加载原理

获取滚动区域的可视高度（element.clientHeight）
获取目标元素到滚动区域顶部的距离（element.offsetTop）
获取滚动区域滚动条滚动的距离（element.scrollTop）
如果 2-3<1 ，元素在可视区域内，可以加载图片，把图片的src属性设置为真实图片的地址

懒加载为什么要优化以及如何优化

为什么要优化：最近有一个业务需求，从后台返回的数据是图文格式，而且是多条，但是其中有些数据并不完全要展示，所以中间会有脱节的现象，就是每隔四五条数据才会显示一条

图片数据是比较多的，要求使用图片懒加载的技术，做好之后，确实大部分的懒加载是没有问题的，但是碰到中间脱节比较严重的数据，最后的几张图片就展示不出来了，

我的优化方案：由于使用的是react进行开发，所以分享一下react版本的优化方法

  // 在 componentDidUpdate 生命周期事件中，使用防抖函数的原理
  // 如果在100ms内，组件多次渲染，则只懒加载处理最后一次
  // 这样就会在组件状态频繁更新的时候，腾出更多的性能给主进程
  // 尽量减少页面的卡顿
  componentDidUpdate() {
    const { allGroups=[] } = this.props.carsSearchStore;
    const data = allGroups[allGroups.length-1].data || [];
    if (this.timer1) {
      clearTimeout(this.timer1);
      this.timer1 = null;
    }
    this.timer1 = setTimeout(() => {
      imgLazyLoad(data);
    },100);
  }

// 创建一个数组，存放要加载的图片src
var src = new Array();
		src.push('https://img1.doubanio.com/view/movie_poster_cover/lpst/public/p2494647817.jpg');
		src.push('https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2455156816.jpg');
		src.push('https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2391991284.jpg');
		src.push('https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2494892274.jpg');
		src.push('https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2462744662.jpg');
		src.push('https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2455261804.jpg');
		src.push('https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2452970761.jpg');
		src.push('https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2452075545.jpg');
		src.push('https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2493595992.jpg');
		src.push('https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2457983084.jpg');

并行加载

// 图片同时加载，Image对象在设置完src之后，会自动向下执行js代码，同时异步获取图片数据
for (var i = 0; i < 10; i++) {
	var img = new Image();
	img.src = src[i];
}

顺序加载

// 图片按顺序加载，使用递归算法，直到加载完最后一张图片，退出递归
function preload(src, index) {
	index = index || 0;
	if(index >= 10) {
		return false;
	}
	if (src && src.length > index) {
		varimg = new Image();
		img.onload = function() {
				preload(src, index + 1);
		}
		img.src = src[index];
	}
}
preload(src);