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

November 8, 2024

This content originally appeared on DEV Community and was authored by tanjiagang

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
})

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
})

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

This content originally appeared on DEV Community and was authored by tanjiagang

JavaScript