2oe
随笔 - 43,  文章 - 3,  评论 - 2,  阅读 - 10261
<!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>
posted on   2oe  阅读(617)  评论(0编辑  收藏  举报
编辑推荐:
· .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视觉模型分析图像,实现图片分类、搜索等功能

< 2025年1月 >
29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 1
2 3 4 5 6 7 8
点击右上角即可分享
微信分享提示