promise实现图片按照指定的加载顺序执行,先加载第二张,再加载第一张,最后加载第三张
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>promise</title>
</head>
<body>
</body>
<script>
function loadImg(src) {
var promise = new Promise(function (resolve, reject) {
var img = document.createElement('img');
img.onload =function () {
resolve(img)
}
img.onerror =function () {
reject()
}
img.src =src
})
return promise;
}
//promise实现先加载第二张图片,再加载第一张图片,最后加载第三张图片
var src1='https://img.mukewang.com/5dccac000001839c18720764.jpg'; //1872 764
var result1 = loadImg(src1);
var src2 ='https://img3.mukewang.com/szimg/5dbffa9109ef425a12000676-360-202.png'; //360 202
var result2 =loadImg(src2);
var src3 ='/static/img/index/logo.png'; //200 80
var result3 =loadImg(src3);
result2.then(function (img) {
console.log('第二个图片加载完成',img.width,img.height)
return result1
}).then(function (img) {
console.log('第一个图片加载完成',img.width,img.height)
return result3
}).then(function (img) {
console.log('第三个图片加载完成',img.width,img.height)
// return result2
}).catch(function (ex) {
console.log(ex)
})
</script>
</html>
执行顺序结果
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
