Promise实现异步加载图片

2021-08-07 14:02:03 阅读：203 来源： 互联网

标签：异步 const img Promise reject new loadImgAsync 加载

<!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>

标签：异步,const,img,Promise,reject,new,loadImgAsync,加载
来源： https://blog.csdn.net/visibleforest/article/details/119485523

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Promise实现异步加载图片