javascript 显示旋转轮图像直到整个页面加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16810423/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show Spinning wheel image till the full page loads
提问by user2431705
I am using the below code:
我正在使用以下代码：
In Layout page inside body tag:
在 body 标签内的布局页面中：
<div id="loading">
<img src="/images/user_profile/ajax-loading.gif" alt="Loading.." />
</div>
In the start page:
在起始页：
<script type="text/javascript">
$(document).ready(function(){
$(window).load(function(){
$('#loading').fadeOut();
});
});
</script>
css:
css：
div.loading{
height: 100px;
width: 100px;
position: fixed;
z-index: 1000;
left: 50%;
top: 50%;
margin: -25px 0 0 -25px;
display:block;
}
The problem is that the spinning image is not coming immediately, it is taking sometime due to which blank page comes and the image is displayed just before the page loads.
问题是旋转图像不会立即出现，由于空白页面出现并且图像在页面加载之前显示而需要一些时间。
I want a solution in which the image should be displayed immediately and till the full page get loaded.
我想要一个解决方案，在该解决方案中，应立即显示图像，直到加载整个页面。
回答by Nick Andriopoulos
Though there are many ways to preload images ( with CSS / Javascript etc ), the one that has worked for me reliably for small images such as that is including the image inline via
尽管有很多方法可以预加载图像（使用 CSS / Javascript 等），但对我来说可靠的小图像（例如通过以下方式包含图像）的方法
<img src="data:image/gif;base64,R0lGODlhEAAQAPQAAP///wAAAPDw8IqKiuDg4EZGRnp6egAAAFhYWCQkJKysrL6+vhQUFJycnAQEBDY2NmhoaAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAAFdyAgAgIJIeWoAkRCCMdBkKtIHIngyMKsErPBYbADpkSCwhDmQCBethRB6Vj4kFCkQPG4IlWDgrNRIwnO4UKBXDufzQvDMaoSDBgFb886MiQadgNABAokfCwzBA8LCg0Egl8jAggGAA1kBIA1BAYzlyILczULC2UhACH5BAkKAAAALAAAAAAQABAAAAV2ICACAmlAZTmOREEIyUEQjLKKxPHADhEvqxlgcGgkGI1DYSVAIAWMx+lwSKkICJ0QsHi9RgKBwnVTiRQQgwF4I4UFDQQEwi6/3YSGWRRmjhEETAJfIgMFCnAKM0KDV4EEEAQLiF18TAYNXDaSe3x6mjidN1s3IQAh+QQJCgAAACwAAAAAEAAQAAAFeCAgAgLZDGU5jgRECEUiCI+yioSDwDJyLKsXoHFQxBSHAoAAFBhqtMJg8DgQBgfrEsJAEAg4YhZIEiwgKtHiMBgtpg3wbUZXGO7kOb1MUKRFMysCChAoggJCIg0GC2aNe4gqQldfL4l/Ag1AXySJgn5LcoE3QXI3IQAh+QQJCgAAACwAAAAAEAAQAAAFdiAgAgLZNGU5joQhCEjxIssqEo8bC9BRjy9Ag7GILQ4QEoE0gBAEBcOpcBA0DoxSK/e8LRIHn+i1cK0IyKdg0VAoljYIg+GgnRrwVS/8IAkICyosBIQpBAMoKy9dImxPhS+GKkFrkX+TigtLlIyKXUF+NjagNiEAIfkECQoAAAAsAAAAABAAEAAABWwgIAICaRhlOY4EIgjH8R7LKhKHGwsMvb4AAy3WODBIBBKCsYA9TjuhDNDKEVSERezQEL0WrhXucRUQGuik7bFlngzqVW9LMl9XWvLdjFaJtDFqZ1cEZUB0dUgvL3dgP4WJZn4jkomWNpSTIyEAIfkECQoAAAAsAAAAABAAEAAABX4gIAICuSxlOY6CIgiD8RrEKgqGOwxwUrMlAoSwIzAGpJpgoSDAGifDY5kopBYDlEpAQBwevxfBtRIUGi8xwWkDNBCIwmC9Vq0aiQQDQuK+VgQPDXV9hCJjBwcFYU5pLwwHXQcMKSmNLQcIAExlbH8JBwttaX0ABAcNbWVbKyEAIfkECQoAAAAsAAAAABAAEAAABXkgIAICSRBlOY7CIghN8zbEKsKoIjdFzZaEgUBHKChMJtRwcWpAWoWnifm6ESAMhO8lQK0EEAV3rFopIBCEcGwDKAqPh4HUrY4ICHH1dSoTFgcHUiZjBhAJB2AHDykpKAwHAwdzf19KkASIPl9cDgcnDkdtNwiMJCshACH5BAkKAAAALAAAAAAQABAAAAV3ICACAkkQZTmOAiosiyAoxCq+KPxCNVsSMRgBsiClWrLTSWFoIQZHl6pleBh6suxKMIhlvzbAwkBWfFWrBQTxNLq2RG2yhSUkDs2b63AYDAoJXAcFRwADeAkJDX0AQCsEfAQMDAIPBz0rCgcxky0JRWE1AmwpKyEAIfkECQoAAAAsAAAAABAAEAAABXkgIAICKZzkqJ4nQZxLqZKv4NqNLKK2/Q4Ek4lFXChsg5ypJjs1II3gEDUSRInEGYAw6B6zM4JhrDAtEosVkLUtHA7RHaHAGJQEjsODcEg0FBAFVgkQJQ1pAwcDDw8KcFtSInwJAowCCA6RIwqZAgkPNgVpWndjdyohACH5BAkKAAAALAAAAAAQABAAAAV5ICACAimc5KieLEuUKvm2xAKLqDCfC2GaO9eL0LABWTiBYmA06W6kHgvCqEJiAIJiu3gcvgUsscHUERm+kaCxyxa+zRPk0SgJEgfIvbAdIAQLCAYlCj4DBw0IBQsMCjIqBAcPAooCBg9pKgsJLwUFOhCZKyQDA3YqIQAh+QQJCgAAACwAAAAAEAAQAAAFdSAgAgIpnOSonmxbqiThCrJKEHFbo8JxDDOZYFFb+A41E4H4OhkOipXwBElYITDAckFEOBgMQ3arkMkUBdxIUGZpEb7kaQBRlASPg0FQQHAbEEMGDSVEAA1QBhAED1E0NgwFAooCDWljaQIQCE5qMHcNhCkjIQAh+QQJCgAAACwAAAAAEAAQAAAFeSAgAgIpnOSoLgxxvqgKLEcCC65KEAByKK8cSpA4DAiHQ/DkKhGKh4ZCtCyZGo6F6iYYPAqFgYy02xkSaLEMV34tELyRYNEsCQyHlvWkGCzsPgMCEAY7Cg04Uk48LAsDhRA8MVQPEF0GAgqYYwSRlycNcWskCkApIyEAOwAAAAAAAAAAAA==" alt="Loading..." />
( Note: the above is a real loading spinner from AjaxLoad)
（注意：以上是来自AjaxLoad的真实加载微调器）
It might not be the most readable, but it is definently loaded with the document. Assuming it's simple ( less than ~2Kb ) it should not impact your performance at all.
它可能不是最易读的，但它肯定与文档一起加载。假设它很简单（小于 ~2Kb ），它根本不会影响您的性能。
回答by Munter
You should make sure that you don't have a massive blocking javascript in your head. Move all your javascript to the bottom of the page. Also set the async attribute on the scripts if your code is properly written for that, otherwise set the defer attribute.
您应该确保您的头脑中没有大量阻塞 javascript。将所有 javascript 移动到页面底部。如果您的代码为此正确编写，还要在脚本上设置 async 属性，否则设置 defer 属性。
When this is done you make sure that your loading screen is the first element in your body, this ensures that the resources will be fetched early on. If you have many css loads, fonts etc before your loading animation, that is what is causing the delay in downloading the image, since the browsers outbound connections are saturated by other downloads. So try and keep your number of downloads to a minimum, or them below the important area or fetch them on demand with an asynchronous asset loader.
完成此操作后，您可以确保加载屏幕是您正文中的第一个元素，这样可以确保尽早获取资源。如果您在加载动画之前有许多 css 加载、字体等，这就是导致下载图像延迟的原因，因为浏览器的出站连接已被其他下载饱和。因此，尽量将下载次数保持在最低限度，或者将下载次数保持在重要区域以下，或者使用异步资产加载器按需获取。
The best way to avoid other assets blocking the display of your loading animation is to inline all the relevant parts in the html. Inline the css right above the html for the loading screen, and maybe even inline the gif source as a base64 encoded data URI.
避免其他资产阻止加载动画显示的最佳方法是内联 html 中的所有相关部分。在加载屏幕的 html 正上方内联 css，甚至可能将 gif 源内联为 base64 编码的数据 URI。
回答by gmo
Use separate instances of document.readyand window.load
使用单独的实例document.ready和window.load
Example:
例子：
HTML
HTML
<img id="test" src="very_tiny_loading_img.gif" alt="Loading..." />
<img src="vary_large_img.jpg" />
JS
JS
$(document).ready(function() {
// executes when HTML-Document is loaded and DOM is ready
alert("document is ready");
});
$(window).load(function(){
// executes when complete page is fully loaded, including all frames, objects and images
alert("window is loaded");
$('#test').fadeOut();
});
Working one with alert (replace with your code)
与警报一起工作（替换为您的代码）
Note: I use @hexblot loading img in the fiddle, because it's a good trick to load tiny img like that ;-)
注意：我在小提琴中使用@hexblot 加载 img，因为加载这样的小 img 是一个很好的技巧；-)
回答by Supriyo
I think as you are mentioning the code inside document.ready, it will fire after all the dom sets up .... rather use $(window).load(), then it will fire the event as soon as window loads.
我认为当你提到 document.ready 中的代码时，它会在所有 dom 设置后触发......而不是使用 $(window).load()，然后它会在窗口加载后立即触发事件。
回答by Rain
I wrote this in my html and it works. But I suggest you put them into seperate files
我在我的 html 中写了这个并且它有效。但我建议你把它们放在单独的文件中
<style>
.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url("http://smallenvelop.com/wp-content/uploads/2014/08/Preloader_8.gif") center no-repeat #fff;
}
}
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>
<script>
$(window).load(function() {
// Animate loader off screen
$(".se-pre-con").fadeOut("slow");;
});
</script>
<div class="se-pre-con"></div>'
