<script>
document.addEventListener('DOMContentLoaded', function() {
    const iframes = document.querySelectorAll('iframe.deferred-load');
    let currentIndex = 0;

    function loadNextIframe() {
        if (currentIndex < iframes.length) {
            const iframe = iframes[currentIndex];
            const src = iframe.dataset.src; // Store the actual src in a data attribute
            if (src) {
                iframe.src = src;
                iframe.onload = function() {
                    currentIndex++;
                    loadNextIframe();
                };
            } else {
                // If no src is defined for some reason, just move to the next
                currentIndex++;
                loadNextIframe();
            }
        }
    }

    // Initialize the first iframe load
    loadNextIframe();
});
</script>

<iframe class="deferred-load" data-src="page1.html"></iframe>
<iframe class="deferred-load" data-src="page2.html"></iframe>
<iframe class="deferred-load" data-src="page3.html"></iframe>