Question

我想将iframes置于一个循环中，让下一个等待队列，而第一个加载，解析和渲染。第二个iframe仅在成功渲染第一个for loop时加载。

我一直在使用setTimeout并测试var displayFrames = document.getElementById("displayframes"); for (var i = 0; i < filenames.length; i++) { var frame = document.createElement("iframe"); frame.src = "templates/" + filenames[i]; frame.width = (window.innerWidth/3); frame.height = (window.innerHeight/2); displayFrames.appendChild(frame); };，并发现超时仅在for循环结束时执行。

<p-dataTable [value]="resultsArr" scrollable="true" scrollHeight="100px" [rows]="4" virtualScroll="virtualScroll" [style]="{'margin-top':'30px'}" [lazy]="true" [totalRecords]="results.length" (onLazyLoad)="lazyLoad($event)">
<p-column header="Id">
<ng-template pTemplate="body" let-index="rowIndex">
    {{index}}
</ng-template>
</p-column>
<p-column  selectionMode="multiple" [style]="{'width':'5%'}"></p-column>
<p-column field="name" header="Name"[sortable]="true"></p-column>
<p-column field="age" header="Age" [sortable]="true"></p-column>
<p-column field="company" header="Company" [sortable]="true"></p-column>
</p-dataTable>

你能否建议我处理这个问题的更好方法？

Answer 1

这样的事情可能会使用iframe onload事件触发下一次加载？

var displayFrames = document.getElementById("displayframes");

var fileNameCounter = 0;

var loadIframe = function() {

    if(fileNameCounter >= filenames.length - 1)
        return;

    var frame = document.createElement("iframe");
    frame.src = "templates/" + filenames[fileNameCounter];
    frame.width = (window.innerWidth/3);
    frame.height = (window.innerHeight/2);
    displayFrames.appendChild(frame);

    fileNameCounter++;

    frame.onload = function() {
        loadIframe();
    }
}

loadIframe();

如何循环不同的iframe？

1 个答案: