通过promise加载图片

最新推荐文章于 2024-11-18 14:58:21 发布

原创最新推荐文章于 2024-11-18 14:58:21 发布 · 754 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了一种使用JavaScript Promise的方法来异步加载图片，并在图片加载成功后获取其宽度，同时将图片添加到页面上。如果图片加载失败，则会捕获错误并输出。

准备工作：
新建一个文件夹
文件夹里有图片文件夹，里面有一张图片

<script>
function loadImg(src){
	return new Promise((resolve,reject)=>{
		var img = document.createElement('img')
		img.onload=()=>{
		resolve(img);
		}
		img.onerror=(err)=>{
		reject(err)
		}
		img.src = src
	})
}
loadImg('./image/logo.png')
.then(img=>{
	console.log(img.width)
	document.body.append(img)
})
.catch(err=>{
	console.log(err)
})
</script>