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所说，代码中有两个严重的错误：

设置onLoad无效;事件处理程序名为onload。
您实际上调用了该函数，而不是分配函数引用。请改用img1.onload=img1Loaded。

如果没有这两个错误修复，上面的代码将：

致电img1Loaded();打印image1 loaded
致电img2Loaded();打印image2 loaded
分配img2.src（加载第二张图片）。这将在脚本返回后实际触发加载。
分配img1.src（加载第一张图片，可能与另一张图片并行）

如何使用HTML / javascript以预定义的顺序加载图像？

1 个答案: