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

老师,这个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>


正在回答

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

1回答

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

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

https://img1.sycdn.imooc.com//climg/635f309b0960ff4b12441462.jpg

祝学习愉快~

  • 张小阳_ 提问者 #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

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

    https://img1.sycdn.imooc.com//climg/63607d9e099ea74410300486.jpg

    祝学习愉快~

    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积分~

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

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

在线咨询

领取优惠

免费试听

领取大纲

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