老师看下这里
// 页面中有个板块 需要多张图片加载完之后才能进行展示
const loadImg = (src) => {
return new Promise((resolve, reject) => {
const img = new Image();
img.src = src;
img.onload = void resolve(img);
img.onerror = void reject("加载失败");
});
};
const imgs = [
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526734981&di=fe12efe9e3a76bd3bb5ac202a3c76823&imgtype=jpg&er=1&src=http%3A%2F%2Fd15.lxyes.com%2F15xm%2Fact%2F20151105%2F20%2F99112408.jpg",
"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1252816855,3131381110&fm=27&gp=0.jpg",
"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1906477750,651116720&fm=27&gp=0.jpg",
];
Promise.all(imgs.map((src) => loadImg(src))).then((arr) => {
console.log(arr);
arr
.forEach((img) => {
document.body.appendChild(img);
})
.catch((e) => {
console.log(e);
});
});
正在回答
同学你好,因为数组中有多个图片地址,所以就使用了map方法来遍历数组,然后然后调用loadImg方法,传入不同的url,这样才可以加载多张图片。
关于map方法的使用,老师这里给同学简单讲解下,同学了解下即可。
map方法,是数组新增的方法,它会返回一个新数组,新数组中的元素是原始数组中的元素,调用函数,处理后的值。如下:
它可以简写成如下形式:
上面的简写形式,对应了promise.all中的写法,如下:
祝学习愉快~
- 参与学习 人
- 提交作业 239 份
- 解答问题 10739 个
本阶段带你深入前端开发的肌理,通过ES6基础知识和前端主流高级框架的学习,助你快速构建企业级移动webAPP应用,进入职场的终极battle
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星