给出图片路径，判断是否有效的图片路径，使用async与await，image.onload()

最新推荐文章于 2024-06-12 16:28:44 发布

Yetian_2000

最新推荐文章于 2024-06-12 16:28:44 发布

阅读量2.2k

点赞数

分类专栏： JS 文章标签： javascript css3 css

本文链接：https://blog.csdn.net/Yetian_2000/article/details/109026841

版权

JS 专栏收录该内容

63 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>1111</title>
        <style>
            .fbox {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;
                padding-bottom: 0.2rem;
            }

            .box {
                width: 400px;
                height: 200px;
                border: 0.01rem solid #cecece;
                margin-top: 2.2rem;
                border-radius: 0.04rem;
                display: flex;
                flex-direction: column;
                box-shadow: 0px 0px 13px #000;
                background-color:#ebebeb;
            }
            .box img{
                width:100%;
                height:100%;
            }
        </style>
    </head>
    <body> 
        <div class="fbox">
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
        </div>
    </body>

    <script src="./js/jquery.js"></script>
    <script>
            async与await的使用要点：1. await的异步函数必须使用return new Promise  2. 同时await的异步函数必须要resolve（），这个是promise基本语法。
            // 使用技术点：1.async  await  ；2.Promise  ；3.图片的onload与onerror
            let image=new Image()
            image.src="./image/tset.jpg"
            function testimg(){
                return new Promise((resolve,reject)=>{
                    image.onload=(img)=>{
                        resolve(img)
                    };
                    image.onerror=(img)=>{
                        reject(img)
                    }
                })
            } 
            async function test(){
                let n = await testimg()
                if(n.type==='load'){
                    $('.box').append(image)
                }                
            }   
            test()
    </script>