Если во время разработки вам нужно использовать холст для одновременного рисования нескольких изображений, но поскольку размеры изображений различаются, изображение в начале массива может не загружаться сначала, а затем отрисовываться, что может привести к порядку Это отличается от того, что я ожидал (особенно потому, что это особенно очевидно для изображений с перенаправлением доменных имен, добавленных между доменами). Мое решение состоит в том, чтобы сначала нарисовать их все, отсортировать, а затем добавить к ним. необходимые узлы.
<div id=myContent></div>let imgArray = ['img1.png', 'img2.png'];let takeArray = new Array();let $myContent = document.getELmentById(myContent);let {imgW, imgH} = {300, 300};let Canvas = document.createElement('canvas');let ctx = Canvas.getContext(2d);let ScaleBy = 2;Canvas.width = imgW * ScaleBy;Canvas.height= imgH * ScaleBy;imgArray.forEach((e, idx) => { let img = new Image(); img. src = e; e.addEventListener('load', () => { ctx.drawImage(img, 0, 0, imgW * ScaleBy, imgH * ScaleBy); let imgCont = new Image(); imgCont.src = Canvas.toDataURL(); imgCont.id = 'img' + idx; getArray.push(imgCont); быть нарисованными Узлы собираются в массив. Порядок здесь может отличаться от порядка imgArray if (receiveArray.length === imgArray.length) { //Все изображения загружены и отрисованы let sortArr = new Array(); takeArray.forEach(ex => { //Сортируем все нарисованные изображения в порядке imgArray sortArr[ex.id.split('img')[1]] = ex; }) sortArr.forEach(ex2 => { $myContent.appendChild(ex2) }) } })})На самом деле это тоже несколько беспомощный подход, поскольку невозможно определить реальный размер загруженных изображений. В первую очередь будут загружаться и отрисовываться небольшие изображения. Если перенаправить доменное имя, это явление будет усиливаться. принят метод сортировки после рисования. Если кто-то думает о лучшем способе, пожалуйста, поправьте и критикуйте.
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.