<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>es6</title>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<script>
// Promise加载图片
var loadImg = (url) => {
return new Promise((resolve, reject) => {
// 创建图片
var img = new Image()
// 加载成功
img.onload = () => {
resolve(img)
}
// 图片加载
img.onerror = () => {
reject(new Error('图片加载失败'))
}
img.src = url
})
}
var imgs = ['http://img4.duitang.com/uploads/item/201411/09/20141109142633_ncKBY.thumb.700_0.jpeg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1538658203&di=2405d72f77c748c885064770074fed77&imgtype=jpg&er=1&src=http%3A%2F%2Fp1.gexing.com%2Ftouxiang%2F20120801%2F0038%2F50180a1634e49_200x200_3.jpg%3Frecache%3D20131108',
'http://img3.imgtn.bdimg.com/it/u=2423321859,2979330058&fm=27&gp=0.jpg'
]
// 并行加载
var loadImgAsync = (imgs)=>{
imgs.forEach(async (item)=>{
let img = await loadImg(item)
document.body.appendChild(img)
})
}
loadImgAsync(imgs)
// 串行加载
var ImgAsync = async (imgs) => {
for (var i = 0; i < imgs.length; i++) {
let img = await loadImg(imgs[i])
document.body.appendChild(img)
}
}
ImgAsync(imgs)
</script>
</body>
</html>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· Sdcb Chats 技术博客:数据库 ID 选型的曲折之路 - 从 Guid 到自增 ID,再到
· 99%的人不知道,桥接模式失败的真正原因是它!
· .NET Core GC压缩(compact_phase)底层原理浅谈
· Winform-耗时操作导致界面渲染滞后
· Phi小模型开发教程:C#使用本地模型Phi视觉模型分析图像,实现图片分类、搜索等功能