在任何其他之前加载特定的图像 [英] load specific image before anything else
问题描述
我正在创建一个网站的加载屏幕。网站加载了许多图片，脚本等HTML和CSS部分是伟大的，但我需要一个方法，以保证加载...图像将被加载之前的任何东西。
我使用jQuery，一切都在 $（function（）{...}）; 。我想这个代码需要在该块之前/之外调用，并且删除加载屏幕的代码将在该块的最后调用。目前，加载图像设置为DIV背景，这是我喜欢的方式。
更新:(解决方案）：
如果完全需要，
我能够使用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文件何时完成加载，使用这种方法，然后请评论。虽然，我不知道这将是一个问题。如果我开始遇到问题，我可能需要在未来提出一个新问题。
感谢每一个帮助这个问题的人。 p>
更新:(修复错误）
我遇到了很多问题使用此方法，因为脚本文件正在异步加载。如果我清除浏览器缓存，然后加载页面，它会完成加载我的jquery依赖文件首先。然后如果我刷新页面，它会工作，因为jquery从缓存加载。我通过设置一个要加载的文件数组，然后将加载脚本放入一个函数来解决这个问题。然后我将使用以下代码逐步浏览每个数组项：
element.onload = function（）{
++一世; _步（）;
}
element.onreadystatechange = function（）{
if（（loaded=== element.readyState ||complete=== element.readyState））{++ i ; _步（）; }
}
加载...图像位于任何其他html元素之前，应首先加载。这当然取决于图像的大小。你可以把加载div在标签后面，并使用'position：absolute'定位。
关于删除加载屏幕的代码，一种方法是执行以下操作。
- 将所有图片，需要加载到隐藏div的脚本（显示：无）
- 设置一个将保存要加载的图片/脚本总数的变量
- 设置计数器变量
- image / scriptonload事件
- 每次onload事件被触发时，它将调用一个函数，该函数将递增计数器变量并检查计数器的值是否等于总变量
- 如果所有资源都已加载，则触发一个自定义事件，该事件将显示带有图片的div，并使用加载屏幕隐藏div。
下面的代码不是testes，所以它可能不工作。希望它有帮助
var totalImages = 0;
var loadCounter = 0;
function incrementLoadCounter（）{
loadCounter ++;
if（loadCounter === totalImages）{
$（document）.trigger（'everythingLoaded'）;
}
}
function hideLoadingScreen（）{
$（'＃loadingScreen'）。
$（'＃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（）;
}）
}）;
}）
I'm a creating a loading screen for website I am making. The website loads many images, scripts, etc. The HTML and CSS part is great, but I need a way to guarantee that the "loading..." image will be loaded before anything else.
I'm using jQuery, and everything is initiated within $(function () { ... });. I imagine that the code for this would need to be called before/outside that block, and the code to remove the loading screen will be called at the very end of that block. Currently, the loading image is set as a DIV background, which is the way I prefer it. However, if it's completely necessary, I will settle for an IMG tag.
Update: (solution)
I was able to answer my own question by using a combination of Robin and Vlad's responses. Both were very good, and excellent answers, however the problem is that they were aimed to load an image before another image, rather than load an image before anything else. (CSS, JS, etc...)
Here's the dirty version of what I came up with:
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]);
}
Taking a look at the load sequence on the network tab of Chrome's developer console shows that 'loading.gif' is loaded first, then 4 dummy images, then 'test.css', and then 'jquery.1.5.1.min.js'. The CSS and JS files don't begin to load, until they've been inserted into the head tag. This is exactly what I want.
I'm predicting that I may begin to have some problems, however, when I begin to load a list of files. Chrome reports that sometimes the JS file is loaded first, but the majority of the time the CSS file is loaded first. This isn't a problem, except when I begin to add files to load, I will need to ensure that jQuery is loaded before a script file that uses jQuery.
If anyone has a solution for this, or a way to detect when the CSS/JS files are finished loading, using this method, then please comment. Though, I'm not sure that it's going to be a problem yet. I may need to ask a new question in the future about this, if I start to run into problems.
Thank you to every who has helped with this issue.
Update: (glitch fix)
I ended up running into a lot of problem with this method, because the script files were being loaded asynchronously. If I would clear the browser cache, and then load the page, it would finish loading my jquery dependent files first. Then if I refreshed the page, it would work, because jquery was loaded from cache. I solved this by setting up an array of files to load, then putting the load script into a function. Then I would step through each array item using this code:
element.onload = function() {
++i; _step();
}
element.onreadystatechange = function() {
if (("loaded" === element.readyState || "complete" === element.readyState)) { ++i; _step(); }
}
As long as the "loading..." image is positioned before any other html elements, it should load first. This of course depends on the size of the image. You could put the loading div right after the tag and position it using 'position:absolute'. Regarding the code to remove the loading screen, one method is to do the following.
- Put all the images, scripts that need to be loaded in a hidden div (display: none)
- Set up a variable that will hold the total of the images / scripts to be loaded
- Set up a counter variable
- Attach to each image / script the "onload" event
- Everytime the "onload" event is triggered it will call a function that will increment the counter variable and check if the value of the counter equals the value of the total variable
- If all resources have been loaded, fire a custom event that will show the div with the images, and hide the div with the loading screen.
The code below isn't testes so it might not work. Hope it helps
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();
})
});
})
这篇关于在任何其他之前加载特定的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
