如何使用HTML / javascript以預定義的順序加載圖像？

Question

我的目標網頁上有2張沉重的圖像作為背景。 它們將以給定的順序顯示，所以我試圖以此順序加載它們，以獲得更好的用戶體驗。 我嘗試了下面的代碼：

        function loadImages(){
            img1= new Image();
            img2= new Image();

            img1.onLoad=img1Loaded();
            img1.src='img/bg1.jpg';
        }

        function img1Loaded(){
            console.log('image1 loaded');
            window.document.getElementById('page1').style.background= " #009ee3 url(img/bg1.jpg) no-repeat left top"; 
            window.document.getElementById('page1').style.backgroundSize="cover";
            img2.onLoad=img2Loaded();
            img2.src='img/bg2.jpg';
        }
        function img2Loaded(){
            console.log('image2 loaded');
            window.document.getElementById('page2').style.background= ' #009ee3 url(img/bg2.jpg) no-repeat center top';
            window.document.getElementById('page2').style.backgroundSize="cover";

        }

控制台消息：

image1 loaded
image2 loaded

以正確的順序出現，但幾乎同時出現。 幾秒鍾后，同時顯示兩個圖像。

我的解決方案出了什么問題，怎么辦？

Answer 1

現代網絡瀏覽器很少打開單個連接。 下載HTML后，將收集所有資源，瀏覽器將並行加載其中的許多資源。 這就是為什么您的方法可能無濟於事的原因。

您看到的時間安排可能有很多原因。 其中最常見的是您之前已打開此頁面，並且圖像仍在緩存中。 然后，瀏覽器將發出一個小的HEAD請求，該請求使它可以確定緩存中的圖像是否仍然“足夠好”。

在刷新緩存后重試。

編輯正如devnull69所說，您在代碼中有兩個嚴重的錯誤：

1. 設置onLoad無效； 事件處理程序稱為onload 。
2. 您實際上沒有調用函數引用，而是分配了函數。 請改用img1.onload=img1Loaded 。

沒有這兩個錯誤修復，上面的代碼將：

1. 呼叫img1Loaded(); 打印image1 loaded
2. 呼叫img2Loaded(); 打印image2 loaded
3. 分配img2.src （加載第二個圖像）。 實際上，這將在腳本返回后觸發加載。
4. 分配img1.src （加載第一個圖像，可能與另一個圖像並行）