老师,我这写的有毛病不,代码需要优化嘛!
<!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>
正在回答
同学你好,对于你的问题解答如下:
1、可以刷新页面后,再查看下效果视频。
2、修改的代码意思是将每隔一秒加载一次图片,然后将加载的图片追加到页面中。
3、同学书写的代码是每隔一秒后用加载的图片替换原来的图片,而练习要求是将图片追加到页面中,所以同学的代码是不符合要求的,可以参考“慕星星”老师给出的解决方案修改代码后再测试下。
4、是的,理解是对的,先加载完一张,然后再加载一张。
祝学习愉快~
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星