一，js代码：
<html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<img id="img" src="" />
<script>
//记录开始时间
let a = new Date();
console.log('开始时间:'+getNowTime(a));
//加载图片
let url = "https://www.marukyu-koyamaen.net/resources/c_media/themes/theme_55/images/banner4_s.jpg";
const img = new Image();
img.src = url;
//用promise保存加载情况
const pImg = new Promise((resolve,reject)=>{
img.onload = () =>{
resolve(img);
}
img.onerror = () => {
reject("图片加载失败");
}
});
//加载的处理
pImg.then((data)=>{
let b = new Date();
console.log('加载结束时间:'+getNowTime(b));
let t = b-a;
console.log('共用时:'+t+"毫秒");
console.log('运行成功:参数是:');
console.log(data);
document.getElementById('img').src=url;
}).catch((data)=>{
console.log('运行失败:参数是:');
console.log(data);
}).then(()=>{
console.log('pImg执行结束');
});
//得到当前时间的指定格式
function getNowTime(date) {
this.year = date.getFullYear();
this.month = date.getMonth() + 1;
this.date = date.getDate();
this.hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
this.minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
this.second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
this.milliSeconds = date.getMilliseconds();
var currentTime = this.year+'-'+this.month + '-' + this.date + ' ' + this.hour + ':' + this.minute + ':' + this.second + '.' + this.milliSeconds;
return currentTime;
};
</script>
</body>
</html>
说明：刘宏缔的架构森林是一个专注架构的博客，地址：https://www.cnblogs.com/architectforest
对应的源码可以访问这里获取： https://github.com/liuhongdi/
或: https://gitee.com/liuhongdi
说明：作者:刘宏缔 邮箱: [email protected]
二，查看效果
加载图片成功时
加载一张不存在的图片时
三，查看chrome的版本:
标签：5304.110,console,log,img,chrome,107.0,date,new,加载 From： https://www.cnblogs.com/architectforest/p/16908724.html