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

Question

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

我正在使用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

您可以重用资源预分配浏览器支持。

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

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

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

要么

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

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

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

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

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

Answer 3

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

如果是，请尝试将其添加到 head-tag 中：

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

从理论上讲，它可以先加载和缓存该图像。