Tips for restricting the preloader display to once per session

My website features a preloader on every page.

<div id="preloader" >
<div id="status"></div>
<div id="statustext">some text</div>
</div>

This preloader is activated using the following jQuery code:

//<![CDATA[
var sCookie = Cookies.get('cargado');

if (sCookie != null) 
{

    $('#preloader').hide();
}
else 
{
    $(window).on('load', function () 
    { // ensures that the entire site has loaded 
        $('#status').fadeOut(); // fades out loading animation 
        $('#preloader').delay(350).fadeOut('slow'); // fades out the white DIV covering the website 
        $('body').delay(350).css({ 'overflow': 'visible' });
        Cookies.set('cargado', 'si');

    })
}
    //]]>

I want the preloader to only appear once per session. This means that if a user navigates through 10 pages on my website, they should only see it on the first page, regardless of whether they entered from the home page or an internal page. I tried implementing the solution shown above by setting up a cookie, but unfortunately, the preloader div does not hide as intended.

You can view a test page created for this issue here:

Answer №1

Opt for utilizing localStorage or sessionStorage over cookies

 <style>
#preloader 
  {
    display:none;
  }
</style>

$(window).on('load', function () 
        { // ensures the entire site is loaded 
            if (typeof(Storage) !== "undefined") {
                // Implementation of localStorage/sessionStorage.                
                if(localStorage.isFirstLoadComplete==="false"){
                    $('#preloader').show(0);
                    $('#status').fadeOut(); // fades out the loading animation 
                    $('#preloader').delay(350).fadeOut('slow'); // fades out the white DIV covering the website
                    $('body').delay(350).css({ 'overflow': 'visible' });
                    localStorage.setItem("isFirstLoadComplete", "true");
                }
            } else {
                // Web Storage not supported..
            }
        });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering issues with querying JSON data using JQuery UI autocomplete feature

Having trouble getting JQuery UI autocomplete to work with fetched json data. I followed this example http://jqueryui.com/autocomplete/, but instead of using hard-coded data, I am fetching from a json source at localhost/myproject/output/names. Here is th ...

Modify the directory attribute based on a constantly changing variable

I need to adjust the dir attribute based on a variable that changes dynamically. <input [id]="'element'+i" [(ngModel)]="parent.firstName" class="form-control input-lg" ...

What is the best way to align these div elements within a table cell?

I am encountering an issue with the placement of elements. What I am striving for is something like this: https://i.stack.imgur.com/VSFXE.png where a div with several other divs inside is positioned at the top of the td, and another div is at the bottom o ...

Transitioning to EM-Based Media Queries

After the recent resolution of the WebKit page-zoom bug, what are the primary benefits of utilizing em-based media queries over pixel-based ones? Incentive I am offering a reward for my question as many prominent CSS frameworks and web developers use em- ...

What is the best way to save multiple HTML widgets in my HTML file using R and plot.ly?

I have recently started experimenting with plot.ly in R and I am fascinated by the ability to easily publish graphs directly in html using htmlwidgets. However, I have encountered a challenge when trying to save multiple widgets in the same html file. Curr ...

Angular material chips showcase a row of five chips

I am working with the basic mat-chips from angular material and I want to arrange them in rows of five without increasing their size: Chip1 Chip2 Chip3 Chip4 Chip5 ..................(space left) Chip6 Chip7 Chip8 Chip9 Chip10 ...............(space le ...

Interactive card featuring a clickable dropdown menu that launches a modal window when selected

I'm running into an issue where my dropdown within a fully clickable card isn't functioning properly. The problem is that when I try to click on the three dots in the dropdown, it keeps opening the modal instead. I'm struggling to find a wa ...

Looking for a way to ensure a div reaches 100% height within a specified area without exceeding the boundaries of the body?

I am working with jQuery mobile and have specific requirements for my project: The main content will be a large graphic that needs to fill the entire page, with both horizontal and vertical scrolling if necessary. The header should remain fixed at the to ...

A guide to showing JSON data in reverse order on a Vue.js HTML page

Here is the order of my JSON data: {"data": {"pid": 50, , "location": {"lat": 10.0520222278408, "lon": 76.5247535705566, "state": "Kerala", "country": "India"}, "package": 0, "contact": {"email": "<a href="/cdn-cgi/l/email-protection" class="__cf_emai ...

The Divs pile one on top of the other

I am trying to position the second div below the first div instead of stacking on top of it and making the first div invisible. How can I achieve this? .shop { width: 100%; height: 1000px; background-color: #ffffff; position: relative; ...

What is the best way to reduce the distance between labels and input fields?

Currently, I am utilizing Blazorise along with Bootstrap 5, however, I have noticed that the spacing between the input field and the label is too wide. Here is an illustration of the space between the input and the label: Is there a way for me to reduce ...

I am looking to insert a jQuery value or variable into the plugin options

How can I insert a jQuery value or variable into plugin options? This is my current script: $(document).ready(function() { // var bannerheight = 580; if ($(window).width() < 2100) { var bannerheight = 410; var opts = JSON.parse( ...

The AJAX pagination feature is malfunctioning following the addition of a new entry

On my main page "landing.php", I have a div where I am using an ajax function to call another page named "fetch_pages.php". In fetch_pages.php, data is loaded from the database in sets of 5 records each time. When the user scrolls to the end of the page, t ...

What is the best way to eliminate the space between two columns of a row in Bootstrap 5 grid system?

In my quest to achieve the grid layout illustrated in the image below https://i.sstatic.net/4hsjw.jpg .col_1{ background-color: bisque !important; height: 500px; } .col_2 { width: 300px; height: 287px; background-position: cent ...

implementing a fixed header in HTML

I am facing a challenge where I have a header with dynamic height and fixed position. My goal is to position the container div right below the header. However, since the header height varies, using a fixed value for margin-top is not feasible. Any sugges ...

Troubleshooting: Why is PHP/HTML Code Displaying as Text in Email?

I have made numerous attempts to modify the header without success. Could it possibly be an issue with the email server? Or is there a crucial aspect that I'm overlooking? I would appreciate if more than just the code appears as plain text in the fi ...

Using JQuery to Divide Strings (Iterating)

Looking at the code below, I find myself having to manually input arr[0], arr[1], arr[2]. But what if the array options change in the future? I want the code to dynamically update without any manual changes. Essentially, I need a solution that loops throu ...

poor scrolling performance when transitioning focus between elements in the interface

Looking for some assistance? Check out this codepen. I'm currently working on a search bar widget that allows navigation from the input field to the search results, displayed as a series of divs. The navigation is controlled via jquery, where the foc ...

Changing characters to asterisks using Javascript

I am currently working on a function that transforms all characters after the first word into asterisks. For example, if I have MYFIRSTWORD MYSECONDWORD, I would like it to show as: MYFIRSTWORD *** Currently, I'm using the code below which replaces ...

Hover effect triggered upon mouse exit

As I delve into learning the basics of HTML and CSS, I came across the :hover property in CSS. This unique feature allows for a specific action to occur when the cursor hovers over an element, based on the code provided. Additionally, I discovered the tran ...