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

时间:2019-07-07 11:12:32

标签: jquery html css

我正在尝试制作前言页面。

问题是我的预加载器映像有点重 因此加载之前需要一些时间。 发生这种情况是因为所有文件都是同时加载的,因此直到完全加载需要时间。

我想配置为先加载预加载器映像,然后才完成加载,然后浏览器将加载所有其他文件。

如何设置在此图像完全加载之前什么都不加载?

这是我使用的代码:

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>

2 个答案:

答案 0 :(得分:0)

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

src

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

答案 1 :(得分:0)

现在,这似乎是一种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>