url和img中的数据是这样传的吗？
来源：5-2 Promise的应用
电磁护盾
2021-10-01 22:53:56
写回答
4回答
-
同学你好，最后测试的没问题，下面的img先执行。onload事件是图片加载成功后才会执行的，所以先执行下面的img.src=url，再执行onload事件中的resolve(img)
url传递没问题，祝学习愉快！
0 -
电磁护盾
提问者
2021-10-01
我加输出语句试了一下，应该是下面的img比上面的img先执行。那么是下面的img把数据传给上面的onload()方法中的img，对吗？为什么上面的onload()方法中的img后执行？
0 -
电磁护盾
提问者
2021-10-01
这两个位置的img谁先执行？还有是哪个img把数据传给另一个img？为什么要往resolve()方法中传入img？
0 -
电磁护盾
提问者
2021-10-01
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #img { width: 80%; padding: 10%; } </style> </head> <body> <img src="images/0.jpg" alt="" id="img" /> <script> // 异步加载图片 const loadImgAsync = url => { console.log(url+'<----------1'); // images/1.jpg<----------1 return new Promise((resolve, reject) => { // 实例化Image构造函数，得到Image对象 const img = new Image(); // 绑定图片加载成功事件 img.onload = () => { console.log(img+'<----------2'); // [object HTMLImageElement]<----------2 // 图片加载成功后调用resolve方法 resolve(img); }; // 绑定错误事件 img.onerror = () => { // 图片加载失败后调用reject方法，传入错误原因 reject(new Error(`Could not load image at ${url}`)); }; // 把url赋值给src属性后，浏览器立即向服务器端发送请求，把图片要过来 // 这里的对象的src属性和上面的DOM元素中的src不是一个 img.src = url; }); } const imgDOM=document.getElementById('img'); // 当图片调用成功后会执行then的第一个回调 // 第一张图片加载完后立即切换到第二张图片 loadImgAsync('images/1.jpg').then(img=>{ console.log(img.src+'<----------3'); // http://127.0.0.1:5500/images/1.jpg<----------3 // imgDOM.src=img.src; // 1秒钟后替换图片 setTimeout(()=>{ imgDOM.src=img.src; },1000) }).catch(err=>{ console.log(err); }) </script> </body> </html>0
相似问题