Как загрузить несколько фреймов одновременно?

Question

Я хочу загрузить 10-15 фреймов одновременно, чтобы они могли отображаться при получении данных с URL.

Я пытался использовать асинхронную функцию, но она по-прежнему работала как одна после одной загрузки фреймов

Вот код:

<iframe src="" height="50" width="320" id="frame_1"></iframe>
<iframe src="" height="50" width="320" id="frame_2"></iframe>
<iframe src="" height="50" width="320" id="frame_3"></iframe>
<iframe src="" height="50" width="320" id="frame_4"></iframe>
<iframe src="" height="50" width="320" id="frame_5"></iframe>

<script>
async function loadIframe1() {
 console.log(1)
 document.getElementById('frame_1').src='file1.html';


}
async function loadIframe2() {
 console.log(2)
 document.getElementById('frame_2').src='file1.html';

 }
async function loadIframe3() {
 console.log(3)
 document.getElementById('frame_3').src='file1.html';

}
async function loadIframe4() {
 console.log(4)
 document.getElementById('frame_4').src='file1.html
}
async function loadIframe5() {
 console.log(5)
 document.getElementById('frame_5').src='file1.html';

}

loadIframe1();
loadIframe2();
loadIframe3();
loadIframe4();
loadIframe5();
</script>

Answer 1

Если я правильно вас понимаю, вы бы хотели отобразить сразу все фреймы.

Вы можете использовать CSS с display: none, и всякий раз, когда они все загружаются, установите для них значение display: block.

Это один из способов, как это сделать:

const iframes = document.querySelectorAll('iframe');
const allIframes = iframes.length;
let iframeCounter = 0;

for (let iframe of iframes) {
  iframe.onload = () => {
    iframeCounter++;
    if (allIframes === iframeCounter) {
      let css = window.document.styleSheets[0];
      css.insertRule(`
        iframe {
          display: block;
        }
      `, css.cssRules.length);
    }
  }
}

iframe {
  height: 200px;
  width: 100%;
  display: none;
}

<iframe src="https://example.com"></iframe>
<iframe src="https://example.com"></iframe>
<iframe src="https://example.com"></iframe>
<iframe src="https://example.com"></iframe>
<iframe src="https://example.com"></iframe>