Promise实现异步加载图片

2024-01-11 18:11:58
<!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>Promise的应用-异步加载</title>
    <style>
        #img{
            width: 80%;
            padding: 10%;
        }
    </style>
</head>
<body>
    <!-- 比如我们在漫画网站看漫画时，我们会花一定的时间去看当前页面的漫画
。那么在我们看当前页漫画时，可以利用这段时间去加载之后页面的漫画内容 -->
    <img id="img" src="https://img.mukewang.com/5e6af63d00011da318720764.jpg" alt="">

    <script>
        const loadImgAsync = url =>{
            return new Promise((resolve,reject)=>{
                /* 下面的流程是固定的，如果没有接触过可以直接记下来 */
                const img = new Image();
                /* 图片加载成功触发img.onload事件 */
                img.onload=() => {
                    /* loadImgAsync是一个通用的函数，所以我们不要写具体的事件处理，
                    当图片加载成功则调用resolve即可 */
                    resolve(img);
                }
                /* 图片加载不了（路径、网络等原因），这时触发onerror事件 */
                img.onerror = ()=> {
                    /* 调用reject(),并返回原因 */
                    reject(new Error(`Could not load the image at ${url}`))
                }
                //加载图片
                img.src = url;
            })
        }

        const imgDOM = document.getElementById('img');
        loadImgAsync('https://img.mukewang.com/5f057a6a0001f4f918720764.jpg')
  .then(img => 
        //点击页面，更换
        document.onclick = function(){
            setTimeout(()=>{
            imgDOM.src = img.src;
        },1000);
        })
    </script>
</body>
</html>
码农公寓

相关文章
