直到整个页面加载完毕，显示旋转轮图片。

Question

我正在使用以下代码：

在布局页面的body标签中：

<div id="loading">
    <img src="/images/user_profile/ajax-loading.gif" alt="Loading.." />
</div>

在起始页上：

<script type="text/javascript">
      $(document).ready(function(){
      $(window).load(function(){
      $('#loading').fadeOut();
      });
      });
</script>

CSS：

div.loading{

   height: 100px;
   width: 100px;
   position: fixed;
   z-index: 1000;
   left: 50%;
   top: 50%;
   margin: -25px 0 0 -25px;
   display:block;
}

问题在于旋转的图像不会立即显示出来，需要一些时间，因此会出现空白页面，并且图像会在页面加载之前显示出来。

我想要一个解决方案，使图像能够立即显示，并在完整页面加载之前一直保持显示。

- user2431705

---

这可能会对您有很大帮助：http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/ - Kyslik

Answer 1

虽然有许多方法可以预加载图片（通过CSS / Javascript等方式），但对于像这样的小图片，我可靠的方法是通过内联包含图像。

<img src="data:image/gif;base64,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" alt="Loading..." />

（注意：以上是来自AjaxLoad的真实加载旋转器）

可能不太易读，但它肯定已与文档一起加载。假设它很简单（小于~2Kb），它不会对您的性能产生任何影响。

- Nick Andriopoulos

---

如何将图像转换为base64？ - gvee

Answer 2

你应该确保头部没有大量的阻塞JavaScript。将所有JavaScript移至页面底部。如果你的代码已经做好了准备，那么设置异步属性，否则设置延迟属性。完成这些操作后，确保加载屏幕是body中的第一个元素，这将确保资源能够及早获取。如果在加载动画之前有许多CSS加载、字体等，则会导致图像下载延迟，因为浏览器的出站连接被其他下载占用。因此，请尽量减少下载数量，或将它们保持在重要区域以下，或使用异步资产加载程序按需获取它们。避免其他资产阻止加载动画显示的最佳方法是在HTML中内联所有相关部分。将CSS直接内联在加载屏幕的HTML上方，甚至可以将GIF源作为Base64编码的数据URI内联。

- Munter

Answer 3

使用单独的 document.ready 和 window.load 实例

示例：

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();
});

使用警告进行调试（将其替换为您的代码）

http://jsfiddle.net/3f2VS/

注意：我在fiddle中使用@hexblot加载img，因为这是一种加载像那样小的图片的好技巧；-）

- gmo

Answer 4

我认为，由于您在document.ready中提到了代码，它将在所有dom设置完成后触发....最好使用$(window).load()，这样它将在窗口加载后立即触发事件。

- Supriyo

Answer 5

我在我的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>'

- Rain