首先加载特定的图像

load specific image before anything else

本文关键字：图像 加载      更新时间：2023-09-26

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

我正在使用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(); }
}

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

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

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

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

或

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

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

然后像往常一样定义body link to image:

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

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

只要" loading…"图像位于任何其他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();
            })
        });
    })

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

如果是，试着在header标签中添加:

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

理论上可以先加载和缓存该图像。

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

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

查看下面:http://fgnass.github.com/spin.js/

相关文章：