显示旋转轮图像，直到满页载入

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.

我想要一个解决方案，在其中图像应该立即显示，直到加载整个页面。

5 个解决方案

#1

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,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" 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)，那么它根本不应该影响您的性能。

#2

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属性(如果您的代码已经为其正确编写)，否则将设置deferred属性。

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中内联所有相关的部分。将css内联到加载屏幕的html之上，甚至可以将gif源作为base64编码的数据URI内联。

#3

Use separate instances of document.ready and window.load

使用单独的文档实例。准备和window.load

Example:

例子:

HTML

<img id="test" src="very_tiny_loading_img.gif" alt="Loading..." />
<img src="vary_large_img.jpg" />

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)

使用alert(用代码替换)

http://jsfiddle.net/3f2VS/

http://jsfiddle.net/3f2VS/

Note: I use @hexblot loading img in the fiddle, because it's a good trick to load tiny img like that ;-)

注意:我在小提琴中使用@hexblot加载img，因为这是一个加载小img的好方法;-)

#4

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.

我想你提到了文档内部的代码。准备好了,它将火毕竟dom设置....而是使用$(窗口).load()，然后它将在窗口加载时立即触发事件。

#5

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>'