我正在使用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文件直到插入到头标中才开始加载.这正是我想要的.
我预测我可能会开始有一些问题,但是,当我开始加载文件列表. 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(); }
}
解决方法
关于删除加载屏幕的代码,一种方法是执行以下操作.
把所有的图像,需要加载的脚本放在一个隐藏的div(显示：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();
})
});
})
