老师,我这写的有毛病不,代码需要优化嘛!

老师,我这写的有毛病不,代码需要优化嘛!

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <img src='' id='image'>

<script>

    //补充代码

    const loadImg = url =>{

        return new Promise(resolve => {

            const img = new Image();

            img.src = url;

            img.onload = () => {

                resolve(img);

            }

            img.onerror = () => {

                let str = `Could not load url at ${url}`;

                throw new Error(str);

            }

        });

    }

    const delay = ms => {

        return new Promise(resolve => {

            setTimeout(resolve,ms);

        })

    }

    const img = document.querySelector('#image');

    const common = (ms,url) =>{

        delay(ms).then(() =>{

        loadImg(url).then(data => img.src =data.src);

    });

    }

   common(1000,'http://img1.sycdn.imooc.com/climg//5b16558d00011ed506000338.jpg');

   common(2000,'http://img1.sycdn.imooc.com/climg//5b165603000146ca06000338.jpg ');

   common(3000,'http://img1.sycdn.imooc.com/climg//5b1656140001c89906000338.jpg');

</script>

</body>

</html>


正在回答

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

2回答

同学你好,对于你的问题解答如下:

1、可以刷新页面后,再查看下效果视频。

2、修改的代码意思是将每隔一秒加载一次图片,然后将加载的图片追加到页面中。

3、同学书写的代码是每隔一秒后用加载的图片替换原来的图片,而练习要求是将图片追加到页面中,所以同学的代码是不符合要求的,可以参考“慕星星”老师给出的解决方案修改代码后再测试下。

4、是的,理解是对的,先加载完一张,然后再加载一张。

祝学习愉快~

好帮手慕星星 2021-03-20 18:17:58

同学你好,效果图中显示了3张图片,而不是一张图片的地址进行替换哦。建议修改如下:

去掉页面中原有的img

http://img1.sycdn.imooc.com//climg/6055cb7d093ec87104770079.jpg

将创建的img追加到页面中

http://img1.sycdn.imooc.com//climg/6055cba90978a9ef06830454.jpg

后面直接调用loadImg,并且将common修改为链式调用

http://img1.sycdn.imooc.com//climg/6055cc8609acd2c311040677.jpg

祝学习愉快!

  • 提问者 母鸡阿 #1

    老师题中的动图我看不到,显示不出来。这修改的代码是什么意思呢,我这代码写的每隔1s切换一个图片不符合题意嘛

    2021-03-20 21:46:51
  • 提问者 母鸡阿 #2

    这意思是不都给相同时间,先加载第一张图片,加载完再加载第二张,以此类推呢

    2021-03-20 22:04:48
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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