Powerjett | 个人技术博客

实现一个加载函数

现有6个url，已经存储在数组urls中，实现一个加载函数 loadImages(urls)。
要求：
并发请求所有url，尽可能快地完成所有请求。按照请求顺序打印已加载的图片。如果前面的图片未加载，则等待前面的所有图片都加载完成后再一起打印。打印时，如果还有在等待的图片，则一起打印。举个例子：假设同时请求 1、2、3、4、5、6 共计6个url。
第1个url请求返回，打印 1；
第2个url请求返回，打印 2；
第5个url请求返回，不打印，因为3和4没有返回；
第3个url请求返回，打印 3；
第4个url请求返回，打印 4，继续打印 5；
第6个url请求返回，打印 6；

javascript

const urls = [
  'https://www.kkkk1000.com/images/getImgData/getImgDatadata.jpg', 
  'https://www.kkkk1000.com/images/getImgData/gray.gif', 
  'https://www.kkkk1000.com/images/getImgData/Particle.gif', 
  'https://www.kkkk1000.com/images/getImgData/arithmetic.png', 
  'https://www.kkkk1000.com/images/getImgData/arithmetic2.gif',
  'https://www.kkkk1000.com/images/getImgData/getImgDataError.jpg'
];

function loadImages(urls = []){
  const finshed = []
  let currentIndex = 0
  const handleLoad = (url, index) => {
    finshed[index] = url
    if(index === currentIndex) {
      console.log(index + 1)
      currentIndex ++
      while (finshed[currentIndex]) {
        console.log(currentIndex + 1)
        currentIndex ++
      }
    }
  }
  for(let i = 0; i < urls.length; i++) {
    const img = new Image()
    img.src = urls[i]
    img.onload = handleLoad.bind(null, urls[i], i)
    img.onerror = handleLoad.bind(null, urls[i], i)
  }
}

loadImages(urls)

实现一个加载函数 ​

实现一个加载函数