jquery - 如何使预加载器图像首先加载

Question

我正在尝试制作一个预加载页面。

问题是我的预加载器图像有点重 所以它需要一些时间才能加载。 发生这种情况是因为所有文件都是同时加载的，因此需要一些时间才能完全加载。

我想配置预加载器图像首先加载，只有当它完成时，浏览器才会加载所有其他文件。

如何设置在该图像完全加载之前不加载任何内容？

这是我使用的代码:

J查询:

<script language="javascript" type="text/javascript">
     $(window).on('load', function () {
     $('#loading').hide();
  });
</script>

CSS:

#loading {
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   position: fixed;
   display: block;
   opacity: 1;
   background-color: #fff;
   z-index: 99;
   text-align: center;
}

#loading-image {
  position: absolute;

HTML:

<div id="loading">
<img id="loading-image" src="preloader.gif" alt="Loading..." /> 
</div>

Answer 1

您的静态文件(如 javascript 和样式)应首先加载，但您可以在预加载器图像完成加载之前加载其他图像。如果你想这样做，而不是填写 img 的 src 属性，填写一个新属性，例如 data-src 并保留 src 属性为空。然后在预加载器完成加载后使用以下代码加载图像。

<script language="javascript" type="text/javascript">
  $(document).ready(function(){
    $('#loading').hide();
    $('img').each(function () {
        $(this).attr('src', $(this).data('src'));
    });
  });
</script>

PS:另一种解决方案可能是使用 lazyload来克服这个问题。