Troubleshooting the pre-loader image loading problem

Question

Troubleshooting the pre-loader image loading problem

Apologies for bringing up a minor issue, but I'm struggling with this one. I added a pre-loader image to my page load using a simple method.

You can find my page here

Here is the HTML code for the Pre-loader image:

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

The jQuery script to trigger the pre-loader on page load:

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

Some CSS styling used:

 <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;
}

The Issue: When the page loads, it briefly flashes before displaying the Pre-loader image and then continues loading after the effect is complete. Ideally, the pre-loader should appear before the rest of the page. Can anyone help me figure out what went wrong?

Thank you.

javascript jquery html css

Answer 1

Answer №1

It seems like the HTML structure in the link you shared is not properly formatted:

To ensure that your HTML page follows a structured format, consider something similar to this:

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

Inside your script tag, include the following method:

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

Ensure that in your CSS file, you have set the following:

.site-content{     
    display: none;
 }

UPDATE: (Answering your question about calling the loader)

You could create a function like this:

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

     }
}

Then, on window load event, call: toggleLoader(false),

When making a request, call: toggleLoader(true),

And upon receiving a response, call: toggleLoader(false).

Answer 2

It seems like the HTML structure in the link you shared is not properly formatted:

To ensure that your HTML page follows a structured format, consider something similar to this:

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

Inside your script tag, include the following method:

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

Ensure that in your CSS file, you have set the following:

.site-content{     
    display: none;
 }

UPDATE: (Answering your question about calling the loader)

You could create a function like this:

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

     }
}

Then, on window load event, call: toggleLoader(false),

When making a request, call: toggleLoader(true),

And upon receiving a response, call: toggleLoader(false).

Answer 3

Answer №2

When a page loads, both the content and loader element are visible simultaneously, without any specific loading sequence. However, you can control this by using the following code example. Let's say you have two div elements - one for the pre-loader and another for the main content container.

<body>
     <div class="se-pre-con"></div>
     <div id="container" style="display: none;">
         <!-- Your site's content goes here -->
     </div>
</body>

Add the display: none style to the container div so that the site content doesn't flicker during page load. Then, use the following code snippet to make the container div visible upon page load:

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

Answer 4

When a page loads, both the content and loader element are visible simultaneously, without any specific loading sequence. However, you can control this by using the following code example. Let's say you have two div elements - one for the pre-loader and another for the main content container.

<body>
     <div class="se-pre-con"></div>
     <div id="container" style="display: none;">
         <!-- Your site's content goes here -->
     </div>
</body>

Add the display: none style to the container div so that the site content doesn't flicker during page load. Then, use the following code snippet to make the container div visible upon page load:

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

Answer 5

Answer №3

After reviewing your page, I noticed that the code .se-pre-con had a display:none; property added to it. Kindly remove this property as shown below. It should work perfectly after that!

.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;
}

Answer 6

After reviewing your page, I noticed that the code .se-pre-con had a display:none; property added to it. Kindly remove this property as shown below. It should work perfectly after that!

.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;
}

Answer 7

Answer №4

/* Dynamically initiate page Loader */
/* for specific div and entire page */
/*html*/
 <div id="divLoaderContainer">
        <!--Loader for body start-->
        <div class="preLoaderPage nodisplay">
            <img class="loading-image" src="~/Content/Images/preLoader.gif" alt="Loading..." />
        </div>
        <!--Loader for body end-->
        <!--Loader for div start-->
        <div class="preLoaderDiv nodisplay">
            <img class="loading-image" src="~/Content/Images/preLoader.gif" alt="Loading..." />
        </div>
        <!--Loader 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;
}
/*End of Loader styles*/

/*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();
}


/*Called by JS*/

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

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

Answer 8

/* Dynamically initiate page Loader */
/* for specific div and entire page */
/*html*/
 <div id="divLoaderContainer">
        <!--Loader for body start-->
        <div class="preLoaderPage nodisplay">
            <img class="loading-image" src="~/Content/Images/preLoader.gif" alt="Loading..." />
        </div>
        <!--Loader for body end-->
        <!--Loader for div start-->
        <div class="preLoaderDiv nodisplay">
            <img class="loading-image" src="~/Content/Images/preLoader.gif" alt="Loading..." />
        </div>
        <!--Loader 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;
}
/*End of Loader styles*/

/*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();
}


/*Called by JS*/

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

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

Answer 9

Answer №5

.custom-loading-spinner {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url('http://www.example.com/loading.gif') center no-repeat #fff;
  display: none;
}

Answer 10

.custom-loading-spinner {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url('http://www.example.com/loading.gif') center no-repeat #fff;
  display: none;
}

Troubleshooting the pre-loader image loading problem

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Having trouble with my ASP.Net OnClick Subs not functioning as desired

Utilizing SCSS to customize specific dimensions

Making a jQuery Ajax request from a view to a controller method, but not rendering the view that is returned by that method in an MVC

Create dynamic modals in ReactJS that appear when a row is clicked

Looking to add a form within another form using AJAX? Just keep in mind that the initial form should also be inserted using AJAX

Using JavaScript to develop a demonstration of the capabilities of Microsoft's Cognitive

Dynamic Calendar Tool with Integrated Time Picker

Troubleshooting: Select2 Search Functionality Error

Crafting an interactive form

Media query failing to activate

Adding an object to an array of objects with the useState hook in React - A simple guide

The AJAX POST request is not receiving the JSON data as expected

How can I deselect the 'select-all' checkbox when any of the child checkboxes are unchecked?

When Selenium in JavaScript cannot locate a button element, use `console.log("text")` instead

Displaying database records in custom fragments using Spring Boot and Thymeleaf

Why is the inner span element not being referenced in jQuery?

What is the best way to extract the src attribute from an image tag nested within innerHtml?

Is there a way to access the route name (path) in Express Node.js while making a request using the req object?

Pass an array of files from a Jquery ajax request to a controller action

What could be causing one of my images to not appear on my Gatsby page?