Promise动态加载图片

最新推荐文章于 2024-02-20 23:59:40 发布

qq_34815188

最新推荐文章于 2024-02-20 23:59:40 发布

阅读量203

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_34815188/article/details/120223056

版权

Promise 动态加载图片 JavaScript DOM

关键词由CSDN通过智能技术生成

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Promise动态加载图片</title>
</head>

<body>
  <script>
    function loadImg(src) {
      const p = new Promise((resolve, reject) => {
        const img = document.createElement("img");
        img.onload = () => {
          resolve(img);
        };
        img.onerror = () => {
          const err = new Error(`图片加载失败 ${src}`);
          reject(err);
        };
        img.src = src;
      });
      return p;
    }

    const url = "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png";

    loadImg(url).then((img1) => {
      console.log(img1);
      let _div = document.createElement('div');
      document.body.appendChild(_div);
      _div.appendChild(img1);
    }).catch((err) => {
      console.error(err)
    });
  </script>
</body>

</html>