1

我的着陆页上有 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

以正确的顺序出现，但几乎同时出现。几秒钟后，两个图像同时显示。

我的解决方案有什么问题，我该怎么办？

4

1 回答 1

2

现代网络浏览器很少只打开一个连接。下载 HTML 后，将收集所有资源，浏览器将并行加载其中的许多资源。这就是为什么您的方法可能没有太大帮助的原因。

您看到的时间可能有很多原因。其中最常见的是您之前打开过此页面，并且缓存中仍有图像。然后浏览器将发出一个小的 HEAD 请求，允许它确定缓存中的图像是否仍然“足够好”。

刷新缓存再试一次。

编辑正如devnull69所说，代码中有两个严重的错误：

  1. 设置onLoad无效；事件处理程序被调用onload。
  2. 您实际上调用了函数，而不是分配函数引用。改为使用img1.onload=img1Loaded。

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

  1. 调用img1Loaded();哪个打印image1 loaded
  2. 调用img2Loaded();哪个打印image2 loaded
  3. 分配img2.src（加载第二个图像）。这实际上会在脚本返回后触发加载。
  4. 分配img1.src（加载第一个图像，可能与另一个并行）
于 2013-10-14T11:33:15.277 回答