Question

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

我正在使用jQuery，所有内容都在$(function () { ... });内启动。我想这个代码需要在该块之前/之外调用，并且删除加载屏幕的代码将在该块的最后调用。目前，加载图像被设置为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(); }
}

Answer 1

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

将所有需要加载的图片，脚本放入隐藏的div（显示：无）
设置一个变量，用于保存要加载的图像/脚本的总数
设置计数器变量
将“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();
        })
    });
})

Answer 2

我不确定是否可以执行。

如果是，请尝试在head-tag中添加：

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

理论上可以在其他任何东西之前加载和缓存该图像。

Answer 3

您可以重复使用资源预转码浏览器支持。

我不确定它适用于所有浏览器，但在我的情况下，这种方法可以帮助我首先加载图像。此外，它允许定义具体的图像，以便可以跳过特定于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/

Answer 4

我认为如果你将IMG标签放在你的html主体的顶部，它将首先被加载。如果您不想移动div，只需使用图像标签的副本即可。加载图像后，它将显示在每个显示相同图片的图像标签中。

Answer 5

或者你可以使用spin.js作为加载图片。它通过javascript显示这个“加载周期图像”。

在以下位置查看： http://fgnass.github.com/spin.js/

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

5 个答案: