老师这样可以吗？
1 | <!DOCTYPE html><br><html lang="en"><br><br><head><br> <meta charset="UTF-8"><br> <meta http-equiv="X-UA-Compatible" content="IE=edge"><br> <meta name="viewport" content="width=device-width, initial-scale=1.0"><br> <title>Document</title><br></head><br><br><body><br> <div></div><br> <script><br> const imgSrc = [<br> 'http://img1.sycdn.imooc.com/climg//5b16558d00011ed506000338.jpg',<br> 'http://img1.sycdn.imooc.com/climg//5b165603000146ca06000338.jpg',<br> 'http://img1.sycdn.imooc.com/climg//5b1656140001c89906000338.jpg']<br><br> const londImg = url => {<br> return new Promise((resolve, reject) => {<br> const img = new Image();<br><br> img.onload = () => {<br> resolve(img)<br> };<br><br> img.onerror = () => {<br> reject(new Error(`Counld not load image at${url.src}`))<br> };<br><br> img.src = url;<br> })<br> };<br><br> const div = document.querySelector('div');<br><br> for (let i = 0; i < imgSrc.length; i++) {<br> londImg(imgSrc[i])<br> .then(url => {<br> setTimeout(() => {<br> div.appendChild(url)<br> }, (i + 1) * 1000)<br> });<br> };<br> </script><br></body><br><br></html><br> |
19
收起
正在回答
2回答
同学你好，这样写效果是对的，建议优化一下实现方案：
londImg返回的是promise对象，所以可以通过链式调用（不用循环），实现逐一加载出图片，如下：
解释说明：
祝学习愉快！
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧