CODEWITHSUNDEEP
javascriptjquerycss
Rizwan Amjad
Rizwan Amjad

Reputation: 442

jQuery Loading Animation is not hiding on page is Loaded or shows delay when i use some other approach

I am using jQuery to a simple task. Task is to simply show a loading animation from none progress until page is completely loaded.

The thing i am experiencing is that the animation shows up after 50-75% time and then goes hidden after the page is completely loaded (I am referring it as delay in next parts of question).

Points to note:

-> If I put Animation Code in header.php and script in footer.php then the code shows delay(Mentioned).

-> If i put both Animation Code and script in header.php the animation never get hidden (Ambiguous to me). For both in footer.php it gets hidden but shows delay.

I want to know the reason why my page is doing this behavior, what is the best approach of doing this task. (I know my approach is not the best one since its misbehaving)

Note: My main page includes both header.php and footer.php files.

My Question ends here.

This is bootstrap loading animation. (Working Fine. No problem with it. Just to show)

Animation Code

<div id="Loading">
    <div class="spinner-border m-5" role="status" >
      <span class="sr-only" >Loading...</span>
    </div>
</div>

And this is what i function i am using for for hiding the animation on page is completely loaded. (Also Working Fine. No problem with it. Just to show)

Script

<script>
    $(document).ready(function($) {
        $('#Loading').fadeOut("slow");
    });
</script>

Upvotes: 1

Views: 89

Answers (3)

IamAshKS
IamAshKS

Reputation: 823

You experienced two different scenarios. Let me clarify them one by one:

1. If I put Animation Code in header.php and script in footer.php then the code shows delay(Mentioned).

You said you're inserting Bootstrap before the Animation Code, so it may take time to load. I will re-iterate your words: yes, it's best practice to avoid any framework or library (like Bootstrap or jQuery) for adding page-loading animation. It's because progress bar should be the first to load and show, and it will delay if browser need to load heavy files like third-party libraries. Well, there's a solution as well:

You can also load a script asynchronously using the HTML5's async attribute for <script> tag. But then, you can't use Bootstrap in Animation code. The reason being, Bootstrap may be loaded later than your Animation code being rendered. Read: https://www.w3schools.com/tags/att_script_async.asp


<script async src="myScript.js"></script>

2. If i put both Animation Code and script in header.php the animation never get hidden (Ambiguous to me). For both in footer.php it gets hidden but shows delay.

You said you're adding jQuery file at the end of <body> in footer.php, so your script when placed in header.php doesn't run since jQuery is still not loaded. Check console log; there will be an error.

You must first load jQuery, then use it. Read: https://forum.jquery.com/topic/and-jquery-not-defined-problems

Also, if you seek to hide the progress bar after all the resources (like images and iFrames) are loaded, then use $(document).load() in place of $(document).ready(). $(document).ready() is fired when the DOM is ready, but $(document).load() is fired when the page is loaded.

Upvotes: 1

Rizwan Amjad
Rizwan Amjad

Reputation: 442

I have found the mistake. The thing that was making the animation to load after some time was that, before animation's code I linked bootstrap CDN and then animation's code. That why it took longer than expected. The thing I learned is that, it was a bad approach to use bootstrap for loading animation(the animation that shows the page is loading). Instead, CSS and HTML for animation should be used. Mainly using any library at your website affects the speed of the website that is not good for SEO.

Upvotes: 1

user12189269
user12189269

Reputation:

document.ready() means your DOM is ready to run if your page have bulky contents and added js at the bottom to load dom its taking time so loading animation comes in delay. And at header make sure jquery is above the custom CSS. If you have not satisfied with the answer edit the question and add complete HTML markup.

Upvotes: 1

Related Questions