老师，这个bug咋解决，他只显示了两张图片

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=1, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        const imgLoadAsync = url => {
            return new Promise((resolve, reject) => {
                const imgObj = new Image();
                imgObj.src = url;

                imgObj.onload = () => {
                    setTimeout(() => {
                        resolve(imgObj);
                    }, 1000);
                };

                imgObj.onerror = () => {
                    reject(`Cloud not load image at${url}`);
                };
            });
        };

        imgLoadAsync('http://img1.sycdn.imooc.com/climg//5b16558d00011ed506000338.jpg')
            .then(
                imgObj => {
                    const imgDom = document.createElement('img');
                    document.body.appendChild(imgDom);
                    imgDom.src = imgObj.src;
                    console.log(imgObj);
                    return imgLoadAsync('http://img1.sycdn.imooc.com/climg//5b165603000146ca06000338.jpg');
                }
            ).catch(err => {
                console.log(err);
            })
            .then(
                imgObj => {
                    const imgDom = document.createElement('img');
                    document.body.appendChild(imgDom);
                    imgDom.src = imgObj.src;
                    console.log(imgObj);
                    return imgLoadAsync('http://img1.sycdn.imooc.com/climg//5b1656140001c89906000338.jpg');
                }
            ).catch(err => {
                console.log(err);
            })


    </script>
</body>

</html>

张小阳_ 2022-10-31

源自：Promise 5-3 编程练习

收起

1回答

好帮手慕慕子回答被采纳获得+3积分 2022-10-31 10:19:15

同学你好，因为最后一张图片只是加载了，并没有追加到页面上，所以只展示了两张图片。

建议修改：直接在imgLoadAsync函数中将成功加载后的图片追加到页面就可以了。示例：

祝学习愉快~

收起回答

张小阳_ 提问者 #1

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=1, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        const imgLoadAsync = url => {
            return new Promise((resolve, reject) => {
                const imgObj = new Image();
                imgObj.src = url;

                imgObj.onload = () => {
                    setTimeout(() => {
                        resolve(imgObj);
                    }, 1000);
                    document.body.appendChild(imgObj);
                };

                imgObj.onerror = () => {
                    reject(`Cloud not load image at${url}`);
                };
            });
        };

        imgLoadAsync('http://img1.sycdn.imooc.com/climg//5b16558d00011ed506000338.jpg')
            .then(
                imgObj => {
                    return imgLoadAsync('http://img1.sycdn.imooc.com/climg//5b165603000146ca06000338.jpg');
                }
            ).catch(err => {
                console.log(err);
            })
            .then(
                imgObj => {
                    return imgLoadAsync('http://img1.sycdn.imooc.com/climg//5b1656140001c89906000338.jpg');
                }
            ).catch(err => {
                console.log(err);
            })
    </script>
</body>

</html>

2022-10-31 22:00:09

好帮手慕慕子回复提问者张小阳_ #2

修改后的代码，虽然三张图片都显示了，但第一张图片并不是等待一秒后加载出来的，而是打开页面时直接显示了，建议修改：将追加代码放在定时器中，如下：
祝学习愉快~

2022-11-01 10:00:01

张小阳_ 提问者回复好帮手慕慕子 #3

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=1, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        const imgLoadAsync = url => {
            return new Promise((resolve, reject) => {
                const imgObj = new Image();
                imgObj.src = url;

                imgObj.onload = () => {
                    setTimeout(() => {
                        resolve(imgObj);
                        document.body.appendChild(imgObj);
                    }, 1000);
                };

                imgObj.onerror = () => {
                    reject(`Cloud not load image at${url}`);
                };
            });
        };

        imgLoadAsync('http://img1.sycdn.imooc.com/climg//5b16558d00011ed506000338.jpg')
            .then(
                imgObj => {
                    return imgLoadAsync('http://img1.sycdn.imooc.com/climg//5b165603000146ca06000338.jpg');
                }
            ).catch(err => {
                console.log(err);
            })
            .then(
                imgObj => {
                    return imgLoadAsync('http://img1.sycdn.imooc.com/climg//5b1656140001c89906000338.jpg');
                }
            ).catch(err => {
                console.log(err);
            })
    </script>
</body>

</html>

2022-11-01 21:52:05

点开查看后面1条评论