在这里面load 和 error事件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>页面加载进度条</title>
    <style>
      html,
      body,
      .progress {
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
      }
      img {
        max-width: 100%;
      }
      .progress {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .none {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="progress" class="progress">0%</div>

    <div id="content" class="none"></div>

    <script>
      function wait(ms) {
        return new Promise(resolve => {
          setTimeout(resolve, ms);
        });
      }

      function loadImgAsync(url) {
        return new Promise((resolve, reject) => {
          const $img = new Image();
        
          // 表示图片加载完成
          $img.addEventListener(
            'load',
            async () => {
              // await wait(1000);
              resolve($img);
            },
            false
          );
          // 监听加载失败事件
          $img.addEventListener(
            'error',
            () => {
              reject(new Error('Could not load image at ' + url));
            },
            false
          );

          $img.src = url;
        });
      }

    
    </script>
  </body>
</html>

load 表示监听图片加载成功的事件。请问老师哪一行语句是加载图片的？ new Image（）吗？这个不就只是实例化 image 对象实例吗？

weixin_慕尼黑0465866 2023-03-22

源自：async/await 3-3 页面加载进度条

收起

1回答

好帮手慕小李 2023-03-22 10:49:13

同学你好，解答如下：

1、load是监听图片是否加载成功；

2、new Image()是（实例化）创建图片；

祝学习愉快！

收起回答

提问者 weixin_慕尼黑0465866 #1

load是监听图片是否加载成功；
所以这个load的事件是监听哪个语句？？还是图片是怎么加载的？

2023-03-22 20:06:15
好帮手慕小李回复提问者 weixin_慕尼黑0465866 #2

以上两问解答如下：
load是指当图片加载完成后。也就是指img从new出来后，到src添加完了以后才算是加载完成。如下：
const $img = new Image();
console.log($img) // 生成一个标签 <img>
$img.addEventListener('load', function() {
console.log($img,"我加载完了")
},
false
);
// 监听加载失败事件
$img.addEventListener('error', () => {
console.log('Could not load image at this url')},
false
);
setTimeout(function(){
$img.src = "https://www.imooc.com/static/img/index/logo2020.png";
},2000)

最终结果如下：
老师这里讲例子简化了，如代码中$img绑定load事件，然后在其中打印结果，但url在两秒钟后进行赋值。同学将代码直接贴到vscode中跑一边就明白了。

2023-03-22 21:30:34