Question

我很抱歉要问一个非常小的事情，但我觉得这个有点无助。我已经以非常简单的方式在页面加载中集成了预加载器图像

HTML :(用于加载预加载器图像的Div）

 <div class="se-pre-con"></div>

Jquery在页面加载时触发预加载器

  $(window).load(function() {
      // Animate loader off screen
      $(".se-pre-con").fadeOut();
  });

一点造型。 CSS

 <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://www.rybena.com.br:8080/RybenaRepository/resource/img/loading.gif') center no-repeat #fff;
}

问题当页面加载时，它会在预加载器图像之前飞溅一次，然后在预加载器图像完成其效果后加载。从理论上讲，预加载器应该在页面加载之前显示。我希望你们中的任何一个人能够弄清楚我做错了哪里和哪些错误？

问候

Answer 1

我认为您的HTML在您提供的链接上格式不正确：

我要做的是确保HTML页面具有与此类似的结构：

<html>
    <head>
    <script>
    </script>
    </head>
    <body>
        <div class="se-pre-con"></div>
        <div class="site-content"></div>
    </body>
</html>

在脚本标记内部有以下方法：

 $(window).load(function() {
    $(".site-content").show(); //or fadeIn (what ever suits your needs)
    $(".se-pre-con").fadeOut();
 });

在你的CSS中确保你设置

.site-content{     
    display: none;
 }

编辑 :(随时在评论呼叫加载程序中回答您的问题）

我可能会创建一个这样的函数：

function toggleLoader(show){
     if(show == true){
        $(".se-pre-con").show();
        $(".site-content").fadeOut();
     }
     else{
        $(".site-content").show();
        $(".se-pre-con").fadeOut();

     }
}

然后在窗口加载上调用：toggleLoader（false），

当您发出请求时，请致电：toggleLoader（true），

当您收到回复时，请致电：toggleLoader（false）。

Answer 2

页面内容在页面加载时也可以与loader元素一起显示，因此没有任何序列首先加载内容，但您可以通过以下代码来管理，假设您有两个div，一个pre-loader div另一个站点{{ 1}} div

container

在<body> <div class="se-pre-con"></div> <div id="container" style="display: none;">  </div> </body> div中添加container样式，因此网站内容无法在页面加载时闪烁..当页面加载时，您可以display: none容器div，请参阅下面的代码

show

Answer 3

刚刚通过您的网页链接，发现display:none;已添加到.se-pre-con，如下所示。请删除display:none;媒体资源。它很有用！

＆＃13;

.se-pre-con {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url('http://www.rybena.com.br:8080/RybenaRepository/resource/img/loading.gif') center no-repeat #fff;
  display: none;
}

＆＃13;

Answer 4

/* page Loader dynamically call */
/* for particular div and all page */
/*html*/
 <div id="divLoaderContainer">
        <!--Lodar for body start-->
        <div class="preLoaderPage nodisplay">
            <img class="loading-image" src="~/Content/Images/preLoader.gif" alt="Loading..." />
        </div>
        <!--Lodar for body end-->
        <!--Lodar for div start-->
        <div class="preLoaderDiv nodisplay">
            <img class="loading-image" src="~/Content/Images/preLoader.gif" alt="Loading..." />
        </div>
        <!--Lodar for div end-->
    </div>
/*css*/
.preLoaderPage {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    display: block;
    opacity: 0.8;
    background-color: #dae3ec;
    z-index: 99;
}
.preLoaderDiv {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    display: block;
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.94);
    z-index: 99;
}

.preLoaderPage .loading-image {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 100;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    width: 180px;
    height: 180px;
}
.preLoaderDiv .loading-image {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 100;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
}
/*Loader here end*/
/*JS function*/
// for full loader
function showLoader(id) {
    if (id == null || id == undefined || id == '') {
        $("div.preLoaderPage").removeClass('nodisplay');
    }
    else {
        showPartialLoader(id)
    }
}
function hideLoader(id) {
    if (id == null || id == undefined || id == '') {
        $("div.preLoaderPage").addClass('nodisplay');
    }
    else {
        hidePartialLoader(id)
    }
}
// for specific div loader

function showPartialLoader(id) {
    var loaderdiv = $("#divLoaderContainer div.preLoaderDiv").clone();
    $(loaderdiv).removeClass('nodisplay');
    var content = $("div#" + id).closest('div.x_content');
    if (content.length > 0)
        $("div#" + id).closest('div.x_content').append(loaderdiv);
    else {
        $("div#" + id).append(loaderdiv);
    }
}

function hidePartialLoader(id) {
    var content = $("div#" + id).closest('div.x_content');
    if (content.length > 0)
        $("div#" + id).closest('div.x_content').find('div.preLoaderDiv').remove();
    else
        $("div#" + id + ' div.preLoaderDiv').remove();
}


/*call by JS*/

$.ajax({
           showLoader(id);// id of div or container

            success: function (data) {
               // your code
            },
hideLoader(id)// id of above div or container
        });

页面加载问题

4 个答案: