React中img图片加载完成前的loading效果

React中img图片加载完成前的loading效果

• 我在React中有这么一个需求，那就是我希望在图片加载完成前的时候一直显示loading动画效果，等图片加载完成了就实现图片的渲染
• 先讲讲具体的思路，再来说说实际的应用
• 实现思路：

// 假设我要加载这三张网页图片
var imglist = ['http://example.com/demo1.png','http://example.com/demo2.png','http://example.com/demo3.png']
// images 使用用来存储 加载完成的图片的
var images = []
imglist.forEach(el=>{
   
	var image = new Image()
	image.src = el
	image.onload = function(){
   
		// 说明图片image加载完成了
		// 将加载完成的image添加到images中
		images.push(image)
	}
})

// 在组件渲染的时候进行判断
if(images.length