老师看下这里

老师看下这里

// 页面中有个板块 需要多张图片加载完之后才能进行展示


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);

    });

});



正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好,因为数组中有多个图片地址,所以就使用了map方法来遍历数组,然后然后调用loadImg方法,传入不同的url,这样才可以加载多张图片。

关于map方法的使用,老师这里给同学简单讲解下,同学了解下即可。

map方法,是数组新增的方法,它会返回一个新数组,新数组中的元素是原始数组中的元素,调用函数,处理后的值。如下:

http://img1.sycdn.imooc.com//climg/5f8ac85a09f261d808060309.jpg

http://img1.sycdn.imooc.com//climg/5f8ac86209f7070004560139.jpg

它可以简写成如下形式:

http://img1.sycdn.imooc.com//climg/5f8ac87409e56fc406400271.jpg

上面的简写形式,对应了promise.all中的写法,如下:

http://img1.sycdn.imooc.com//climg/5f8ac88609853d3a07630191.jpg

祝学习愉快~

好帮手慕慕子 2020-10-17 10:44:30

同学你好,代码中存在的问题解答如下:

1、catch方法是Promise下的,数组是不可以调用的,建议修改:

http://img1.sycdn.imooc.com//climg/5f8a5a3d09f0dae911890570.jpg

2、由于第一张图片地址已经失效了,所以无法访问,建议调整下第一张图片的地址与第三张图片地址一样再测试下。

http://img1.sycdn.imooc.com//climg/5f8a5a7309f2799715850331.jpg

测试结果如下:

http://img1.sycdn.imooc.com//climg/5f8a5a8809c8baeb16590337.jpg

祝学习愉快~

  • 这一点明白了,还有就是.all里面的参数为什么要写成“imgs.map((src) => loadImg(src))”?
    2020-10-17 16:58:36
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师