ecmascript - es6 promise 有序加载图片问题

问题描述

问 题

项目需要有序地加载10张左右的图片,现在写了一堆的addEventListener('load');
想用promise实现,求指教

解决方案

addEventListener('load'); 这个必须加的,promise直白的讲就是把原有得callback的形式,整理成类似同步的书写形式.但是在执行下一个操作的时候必须有第一个操作的已完成通知。

所以大概思路是这样

function getImg(url) {  
    return Promise(function(resolve, reject) {  
        var img = new Image();  
  
        img.onload = function() {  
            resolve(this);  
        };  
  
        img.onerror = function(err) {  
            reject(err);  
        };  
  
        img.url = url;  
    });  
};

getImg('/image/test1.img').then(function(result){
    return getImg('/image/test2.img');
}).then(function(result){
    return getImg('/image/test3.img');
}).then(function(result){
    return getImg('/image/test4.img');
}).catch(function(err){
    console.log(err.stack);
})

这里给出的是顺序加载4个图片的demo

这篇关于ecmascript - es6 promise 有序加载图片问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！