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

您的静态文件（例如javascript和样式）应首先加载，但是您可以发布池加载其他图像，直到预加载器图像加载完成。如果需要的话，不要填充src的{{1}}属性，而是填充诸如img之类的新属性，并将data-src属性保留为空。然后，在预加载程序完成加载后，使用以下代码加载图像。

src

PS：一种替代解决方案可能是使用lazyload来解决此问题。

Answer 2

现在，这似乎是一种cool的处理方式，但是从技术上来讲，您只是在让用户等待图像加载完毕然后添加所有图像。但是，这就是您要执行的操作。将所有图像源（其网址）从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>

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

2 个答案: