如何让预加载器镜像先加载

Question

我正在试着做一个前置页。

问题是我的预加载器镜像有点重，所以需要一段时间才能加载。这是因为所有文件都是同时加载的，所以需要一段时间才能完全加载。

我想配置的预加载器图像是第一次加载，只有当它完成，然后浏览器将加载所有其他文件。

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

这是我使用的代码：

Jquery：

<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

您的静态文件，如javascripts和样式，应该首先加载，但您可以post post加载其他图像，直到您的预加载器图像完成加载。如果需要，可以填充一个新属性，例如data-src，并将src属性留空，而不是填充imgs的src属性。然后在预加载器完成加载后，使用以下代码加载图像。

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

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

Answer 2

现在，这可能看起来像是一种cool方式，但从技术上讲，你只是让你的用户等待你的图像加载，然后添加所有的图像。然而，这就是你要做的事情。将所有图像源(其urls)从src属性移动到data-src属性。您也可以对脚本文件执行此操作。然后这样做。

<script>
  $(document).ready(function(){
    var files = $("[data-src]");
    $.each(files, function(index, element){
        //This is just the check for the last file
        if(index === files.length){
            $(element).on("load error", function(){
                $('#loading').hide();            
            });
        }
        $(element).attr("src", $(element).data("src"));
    });
  });
</script>