用promise做图片的预加载

本文介绍了一种使用JavaScript实现的图片预加载技术,通过Promise.all和Promise.race来控制图片加载的顺序,确保页面加载效率的同时优化用户体验。
var url='jsonp-master/0.jpg'
var url1='jsonp-master/1.jpg'
var url2='jsonp-master/2.jpg'
var img=document.createElement('img');
var img1=document.createElement('img');
var img2=document.createElement('img');
img.src=url;
img1.src=url1;
img2.src=url2;

function loading(img){
    return new Promise(function(resolve,reject){
        img.onload=function(){
            resolve(img)
        }
    })
}
//图片预加载  等所有图片都加载完毕后统一显示
Promise.all([
    loading(img),loading(img1),loading(img2)
]).then(function(res){
    for(var i=0;i<res.length;i++){
        document.body.appendChild(res[i])
    }
})
//谁加载的快就显示谁
Promise.race([
    loading(img),loading(img1),loading(img2)
]).then(function(res){
        document.body.appendChild(res)
})

  

转载于:https://www.cnblogs.com/liuhao-web/p/7127671.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值