在其他任何事情之前加载特定图像

Question

我正在为我正在制作的网站创建加载屏幕。该网站加载了许多图像、脚本等。HTML 和 CSS 部分很棒，但我需要一种方法来保证“正在加载…”图像将在其他任何内容之前加载。

我正在使用 jQuery，一切都在 $(function () { ... }); 内启动。我想这个代码需要在该块之前/之外调用，并且删除加载屏幕的代码将在该块的最后调用。目前，加载图像设置为 DIV 背景，这是我喜欢的方式。但是，如果完全有必要，我会选择 IMG 标签。

更新：（解决方案）

我能够结合使用 Robin 和 Vlad 的回答来回答我自己的问题。两者都是非常好的答案，但问题是它们的目的是在加载另一个图像之前加载一个图像，而不是在加载其他图像之前加载一个图像。 （CSS、JS 等…）

这是我想出的脏版本：

 var files = [new Image(), document.createElement('link'), document.createElement('script')];
files[0].setAttribute('src', 'images/loading.gif');
files[1].setAttribute('rel', 'stylesheet');
files[1].setAttribute('type', 'text/css');
files[1].setAttribute('href', 'test.css');
files[2].setAttribute('type', 'text/javascript');
files[2].setAttribute('src', 'js/jquery-1.5.1.min.js');
window.onload = function (e) {
    document.getElementsByTagName('head')[0].appendChild(files[1]);
    document.getElementsByTagName('head')[0].appendChild(files[2]);
}

查看 Chrome 开发人员控制台的网络选项卡上的加载顺序显示首先加载“loading.gif”，然后是 4 个虚拟图像，然后是“test.css”，然后是“jquery.1.5.1.min.js” ‘. CSS 和 JS 文件不会开始加载，直到它们被插入到 head 标签中。这正是我想要的。

然而，当我开始加载文件列表时，我预测我可能会开始遇到一些问题。 Chrome 报告有时 JS 文件会先加载，但大多数情况下 CSS 文件会先加载。这不是问题，除非我开始添加要加载的文件时，我需要确保在使用 jQuery 的脚本文件之前加载 jQuery。

如果有人对此有解决方案，或者使用此方法检测 CSS/JS 文件何时完成加载的方法，请发表评论。不过，我不确定这是否会成为一个问题。如果我开始遇到问题，我可能需要在未来提出一个新问题。

感谢所有帮助解决此问题的人。

更新：（故障修复）

我最终使用这种方法遇到了很多问题，因为脚本文件是异步加载的。如果我清除浏览器缓存，然后加载页面，它将首先完成加载我的 jquery 依赖文件。然后，如果我刷新页面，它就会工作，因为 jquery 是从缓存中加载的。我通过设置要加载的文件数组，然后将加载脚本放入函数中来解决这个问题。然后，我将使用以下代码遍历每个数组项：

 element.onload = function() {
    ++i; _step();
}
element.onreadystatechange = function() {
    if (("loaded" === element.readyState || "complete" === element.readyState)) { ++i; _step(); }
}

原文由 Shea 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

只要“正在加载…”图像位于任何其他 html 元素之前，它就应该首先加载。这当然取决于图像的大小。您可以将加载 div 紧跟在标签之后，并使用“position:absolute”定位它。关于删除加载屏幕的代码，一种方法是执行以下操作。

• 将所有需要加载的图片、脚本放在一个隐藏的div中（display: none）
• 设置一个变量来保存要加载的图像/脚本的总数
• 设置计数器变量
• 将“onload”事件附加到每个图像/脚本
• 每次触发“onload”事件时，它都会调用一个函数来递增计数器变量并检查计数器的值是否等于总变量的值
• 如果已加载所有资源，则触发一个自定义事件，该事件将显示带有图像的 div，并隐藏带有加载屏幕的 div。

下面的代码未经测试，因此可能无法正常工作。希望能帮助到你

    var totalImages = 0;
    var loadCounter = 0;

    function incrementLoadCounter() {
       loadCounter++;
       if(loadCounter === totalImages) {
          $(document).trigger('everythingLoaded');
       }
    }

    function hideLoadingScreen() {
       $('#loadingScreen').hide();
       $('#divWithImages').show();
    }

    $(document).ready(function(e) {
        $('#loadingScreen').bind('everythingLoaded', function(e) {
            hideLoadingScreen();
        });
        var imagesToLoad = $('img.toLoad');
        totalImages = imagesToLoad.length;

        $.each(imagesToLoad, function(i, item) {
            $(item).load(function(e) {
               incrementLoadCounter();
            })
        });
    })

原文由 Vlad Balmos 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以重用资源预加载浏览器支持。

我不确定它是否适用于所有浏览器，但就我而言，这种方法有助于我首先加载图像。它还允许定义具体图像，因此可以跳过特定于 UI 的图像

首先在标头中定义要预加载的资源并定义资源优先级

<link rel="preload" href="link-to-image" as="image">

或者

<link rel="preload" href="link-to-image">

第二行允许增加所有对象类型（脚本/图像/样式）的加载优先级。第一行 - 仅通过图像。

然后像往常一样在正文中定义图像链接：

 <img src="link-to-image" alt="">

这是我的工作示例 https://jsfiddle.net/vadimb/05scfL58/

原文由 VadimB 发布，翻译遵循 CC BY-SA 3.0 许可协议