<!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>
给出图片路径,判断是否有效的图片路径,使用async与await,image.onload()
最新推荐文章于 2024-03-19 00:22:27 发布