Are you looking to enhance user experience on your website by showing a loading animation while content is being fetched? Look no further! PreLoadMe is a lightweight preloader that utilizes jQuery and CSS, ensuring that your site maintains optimal performance across all modern browsers. Let’s dive into how to implement this tool step-by-step.

Why Use PreLoadMe?

• Shows a loading animation until the entire web content is fetched.
• Fades out seamlessly once the page is fully cached.
• Highly customizable to suit your styling needs.
• Compatible with both desktop and mobile browsers.

Live Preview

You can see a live preview of PreLoadMe here.

Implementation Steps

Step 1: Add jQuery

You need to include jQuery before the closing body tag of your HTML document. Insert the following code:

<!-- jQuery Plugin -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script>

Step 2: Setup PreLoadMe JavaScript

Add the following JavaScript code just before the closing body tag:

<!-- Preloader -->
<script type="text/javascript">
<![CDATA[
    $(window).on('load', function() { // ensures the whole site is loaded
        $('#status').fadeOut(); // fade out the loading animation
        $('#preloader').delay(350).fadeOut('slow'); // fade out the white DIV
        $('body').delay(350).css('overflow','visible'); // allow scrolling
    });
<]]>
</script>

Step 3: Set Up the CSS

Make sure to include the following CSS code within your stylesheet to style the preloader:

body { overflow: hidden; }
/* Preloader */
#preloader {
    position: fixed;
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color: #fff; /* Change background color if desired */
    z-index: 99; /* Ensures it stays on top */
}
#status {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%; /* centers the loading animation horizontally */
    top: 50%; /* centers the loading animation vertically */
    background-image: url('..img/status.gif'); /* path to loading animation */
    background-repeat: no-repeat; 
    background-position: center; 
    margin: -100px 0 0 -100px; /* centers the loading animation */
}

Step 4: HTML Setup

Finally, place the following HTML code directly after the opening body tag:

<!-- Preloader -->
<div id="preloader">
    <div id="status"> </div>
</div>

This creates a white div that entirely covers your website and an inner div that will display the loading animation. It’s important to ensure that your document has a proper DOCTYPE declaration for it to function correctly.

Using with AJAX Requests

If you want to show the preloader during AJAX requests, you can use the following CSS code:

#preloader {
    position: fixed; 
    left: 0px; 
    top: 0px; 
    width: 100%; 
    height: 100%; 
    background-color: #fff; /* Change background color if desired */
    z-index: 99; /* Ensures it stays on top */
}
#status { 
    /* Same as above */
} 

Your JavaScript code for AJAX will look like this:

$('#status').fadeIn();
$('#preloader').fadeIn();
$.get(url, data, function() {
    $('#status').fadeOut();
    $('#preloader').fadeOut();
});

Troubleshooting

• If the preloader doesn’t appear, check if your jQuery is correctly included and that the path to your loading animation is accurate.
• Ensure there are no conflicting CSS styles that might be hiding the preloader.
• If issues persist, try clearing your browser cache or testing on multiple browsers.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Final Thoughts

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.