这里应该怎么去追加第三张图片切换

这里应该怎么去追加第三张图片切换

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Object.entries()</title>
  </head>
  <body>
    <img
      src="http://img1.sycdn.imooc.com\/climg/5b16558d00011ed506000338.jpg"
      alt=""
      id="img"
      style="padding: 5%"
    />

    <script>
      const loadImgAsync = (url) => {
        return new Promise((resolve, reject) => {
          // 实例化构造函数Images
          const img = new Image();

          // 当图片被成功加载
          img.onload = () => {
            resolve(img);
          };
          // 当图片没有被成功加载
          img.onerror = () => {
            reject(new Error(`Could not load image at ${url}`));
          };

          img.src = url;
        });
      };

      const imgDOM = document.getElementById("img");
      loadImgAsync(
        "http://img1.sycdn.imooc.com\/climg/5b165603000146ca06000338.jpg "
      )
        .then((img) => {
          console.log(img.src);
          setTimeout(() => {
            imgDOM.src = img.src;
          }, 1000);
        })
        .catch((err1) => {
          console.log(err1);
        })
        .then(() => {
          loadImgAsync(
            "http://img1.sycdn.imooc.com/climg//5b1656140001c89906000338.jpg "
          );
        });
    </script>
  </body>
</html>


正在回答 回答被采纳积分+1

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

1回答
好帮手慕星星 2022-09-30 16:13:52

同学你好,建议将图片切换放在loadImgAsync函数中,这样每次调用loadImgAsync函数即可。

另外练习中实现的是追加图片,不是地址替换,建议修改为:

https://img1.sycdn.imooc.com//climg/6336a52a094c9e9f12880604.jpg

直接调用函数

https://img1.sycdn.imooc.com//climg/6336a53a09fc818a11060668.jpg

祝学习愉快!

  • 提问者 清夏_ #1

    老师 ,怎么捕获第三张图片出错

    2022-09-30 16:25:24
  • 好帮手慕星星 回复 提问者 清夏_ #2

    可以在第三次调用前加一个return,将图片地址置空测试

    https://img1.sycdn.imooc.com//climg/6336adfc0981199c06880154.jpg

    https://img1.sycdn.imooc.com//climg/6336ae1709de3a8a05490081.jpg

    自己测试下。

    2022-09-30 16:51:41
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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