不使用promise时是异步加载，图片加载的顺序不固定
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
* {
margin: 0;
padding: 0;
}
</style>
<title>demo</title>
</head>
<body>
<div id="image_div" style="height:800px;overflow:scroll;">
<table id="image_table">
</table>
</div>
</body>
</html>
<script>
let path_list = [
"00.JPG",
"01.JPG",
"02.JPG",
"03.JPG",
"04.JPG",
"05.JPG",
"06.JPG",
"07.JPG",
"08.JPG",
"09.JPG",
"10.JPG",
"11.JPG"
]
function loadImage(path, num) {
const newImg = document.createElement("img")
newImg.src = path
let canv1 = document.createElement('canvas')
canv1.width =480
canv1.height =320
newImg.onload = () => {
let ctx1 = canv1.getContext('2d')
ctx1.drawImage(newImg, 0, 0)
ctx1.font = "30px Arial"
ctx1.fillStyle = 'rgba(0,0,0)'
ctx1.fillText(num, 0, 315)
const newImg1 = document.createElement("img")
newImg1.src = ctx1.canvas.toDataURL('image/jpeg')
var tr=document.createElement("tr")
var xh=document.createElement("td")
var image2 = document.createElement('img')
image2.src = ctx1.canvas.toDataURL('image/jpeg')
xh.appendChild(image2)
tr.appendChild(xh)
var tab=document.getElementById("image_div")
tab.appendChild(tr)
}
}
for (let i = 0; i < path_list.length; i++) {
loadImage(path_list[i], i + 1)
}
</script>
使用promise all可以实现顺序加载
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
* {
margin: 0;
padding: 0;
}
</style>
<title>demo</title>
</head>
<body>
<div id="image_div" style="height:800px;overflow:scroll;">
<table id="image_table">
</table>
</div>
</body>
</html>
<script>
let path_list = [
"00.JPG",
"01.JPG",
"02.JPG",
"03.JPG",
"04.JPG",
"05.JPG",
"06.JPG",
"07.JPG",
"08.JPG",
"09.JPG",
"10.JPG",
"11.JPG"
]
function loadImage(path, num) {
return new Promise(function (resolve, reject) {
const newImg = document.createElement("img")
newImg.src = path
let canv1 = document.createElement('canvas')
canv1.width = 480
canv1.height = 320
newImg.onload = () => {
let ctx1 = canv1.getContext('2d')
ctx1.drawImage(newImg, 0, 0)
ctx1.font = "30px Arial"
ctx1.fillStyle = 'rgba(0,0,0)'
ctx1.fillText(num, 0, 315)
const newImg1 = document.createElement("img")
newImg1.src = ctx1.canvas.toDataURL('image/jpeg')
resolve(newImg1)
}
newImg.onerror = () => {
reject("加载错误")
}
})
}
let arr = []
for (let i = 0;i < path_list.length; i++) {
arr.push(loadImage(path_list[i], i + 1))
}
Promise.all(arr).then((values)=>{
for (let v of values) {
var tr=document.createElement("tr")
var xh=document.createElement("td")
xh.appendChild(v)
tr.appendChild(xh)
var tab=document.getElementById("image_table")
tab.appendChild(tr)
}
})
</script>