图片加载之promise封装

gunsmoke

于 2020-02-25 21:27:17 发布

阅读量582

点赞数

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/gunsmoke/article/details/104505842

版权

javascript 专栏收录该内容

68 篇文章

订阅专栏

本文介绍了一种使用JavaScript Promise异步加载并显示图片的方法。通过定义loadImgPromise函数，可以确保图片完全加载后再将其添加到页面中，提高了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        function loadImgPromise(src)
        {
            return new Promise((resolve,reject) => {
               let img = new Image();
               img.src = src;
               // 这里改变promise对象状态，并且把图片往下传递
               img.onload = () => {resolve(img)}; 
            });
        }
        let src = "https://dgss0.bdstatic.com/5bVWsj_p_tVS5dKfpU_Y_D3/res/r/image/2017-09-27/297f5edb1e984613083a2d3cc0c5bb36.png";
        loadImgPromise(src).then((img) => {
            document.body.appendChild(img);
            console.log('图片加载成功');
        });
    </script>
</body>
</html>