Javascript 先加载特定图像，然后再加载其他内容

我正在为我正在制作的网站创建一个加载屏幕。该网站加载了许多图像，脚本等。HTML和CSS的部分是伟大的，但我需要一种方法，以确保“加载…”图像将加载之前的任何事情

我正在使用jQuery，所有内容都是在

$（函数（）{…}）中启动的。我想这方面的代码需要在该块之前/之外调用，删除加载屏幕的代码将在该块的最后调用。目前，加载图像设置为DIV背景，这是我喜欢的方式。然而，如果这是完全必要的，我会满足于IMG标签

更新：（解决方案）

我结合罗宾和弗拉德的回答回答了自己的问题。这两个都非常好，答案也非常好，但问题是，它们的目的是在加载另一个图像之前加载一个图像，而不是在加载任何其他图像之前加载一个图像。（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(); }
}

我不确定是否可以强制执行

如果是，请尝试在head标记中添加以下内容：

<script type="text/javascript">
    if(document.images)
        (new Image()).src="http://www.image.com/example.png";
</script>


if（document.images）
（新图像（））.src=”http://www.image.com/example.png";

从理论上讲，这可能会先加载和缓存该图像。
我认为如果将IMG标记放在html正文的顶部，它将首先加载。如果不想移动div，只需使用image标记的副本。加载图像后，它将显示在显示相同图片的每个图像标记中。
或者您可以使用spin.js作为加载图像。它通过javascript显示这个“加载循环图像”

请在以下网址查看：
只要“加载…”图像位于任何其他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();
        })
    });
})

您可以重用资源预嵌入浏览器支持

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

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

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



或



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

然后像往常一样定义与图像的体内链接：

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



这是我的工作示例
@andrewjackson-当您尝试时，请您评论一下这是否有效。我做了一些测试，这对于确保在加载任何其他图像之前加载图像非常有效，但是无论我将其放置在何处或重新排列，加载图像之前始终会调用JS和CSS文件。到目前为止，我很确定这是非常可能的，因为Google.com在加载任何脚本之前加载了几个图像。我可能需要先加载图像，然后在Javscript中创建脚本和链接标记，而不是使用HTML。或者我可以使用iframe尝试一种肮脏的方法。尝试将css和脚本标记放在loading-div之后。这应该可以解决问题。考虑有一个小的CSS文件，唯一的目的是设计你的加载div并在加载div之前加上这个。否则，你总是可以加载所有的CSS标签等。在加载图片被成功加载的情况下，通过JavaScript添加HTML：我尝试了罗宾，但是不管我如何重新排列它，Chrome都加载了J。
<img src="link-to-image" alt="">