DEV Community

tanjiagang
tanjiagang

Posted on

Using Promise in Javascript to solve aynchronous loading(image, css, js, etc.)

Sometimes we need to complete some operations after loading static resources. Using callback function is a common method, but this approach may generate multi-callback functions, making the code struction more complex. So we can use Promise to deal with this issue.

Example(loading an image)

function loadImg(imgSrc) {
  return new Promise(function(resolve, reject){
    img.load = () => {
      // asynchronous code here
      resolve()
    }

    img.onError = () => {
      reject()
    }
  })
}


loadImg('src.jpg').then(()=>{
  // operations after loading image here
}).catch(()=>{
 // error handling
})
Enter fullscreen mode Exit fullscreen mode

Example of loading mutiple images

function loadImg(imgSrc) {
  return new Promise(function(resolve, reject){
    img.load = () => {
      // asynchronous code here
      resolve()
    }

    img.onError = () => {
      reject()
    }
  })
}

const imgList = ['1.jpg', '2.jpg', '3.jpg', '4.jpg']
let imgLoadingPromise = []
for(let img of imgList) imgLoadingPromise.push(loadImg(img))

Promise.all(imgLoadingPromise).then(()=>{
  // operations after loading image here
}).catch(()=>{
 // error handling
})
Enter fullscreen mode Exit fullscreen mode

Promise.all() receives an array of promises that only becomes fullfilled state when all Promise become fullfilled state

Top comments (0)