Question 11113 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to check if a page is being loaded for the first time – or hard refreshed? – Jquery

I’m using a template that uses an icon library called `material-icons`. And when using a slower internet connection, it shows the icon’s code (example below) in plain text until the icon is grabbed from cdn. It lasts less than a second, but still bad for user experience.

Icon code that shows on screen while icon is loading (only the `point_of_sale` part)

<i class="material-icons">point_of_sale</i>

Therefore I want to add a delay with css to let these icons load first and then fade in with a nice animation, but I don’t want it to happen every time the page reloads, so I need to be able to determine if a page is loaded for the first time or reloaded with something like `Ctrl + F5` to be able to add class to these icons to load them slowly.

I’m aware that I can use cookies to determine if it’s the first time the page is loaded or not. But it is not very reliable since doing a `Ctrl + F5` can break that control by not deleting the cookies but still hard refreshing the page.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    This solved my problem, solution by @IvanSushkov

    JS

    document.addEventListener('DOMContentLoaded', function() {
    var firstLoad = sessionStorage.getItem('firstLoad') || localStorage.getItem('firstLoad');
    if (!firstLoad) {
        var icons = document.getElementsByClassName('material-icons');
        for (var i = 0; i < icons.length; i++) {
            icons[i].classList.add('slow-load');
        }
        sessionStorage.setItem('firstLoad', true);
    }
});

    CSS:

    
.material-icons {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.slow-load {
    transition-delay: 0.2s;
}

.material-icons:not(.slow-load) {
    opacity: 1;
}

.material-icons.slow-load {
    opacity: 1;
}

  2. 0

    In all honesty, you are likely to create worse UX than just letting the icons load the same way every time (with the fade in). For example, you never know if someone does a hard refresh to disable cache, or if cache is disabled in their browser, or if the user is on a slow connection, or any number of scenarios you can’t imagine… and I assure you you cannot imagine all the ways users use your app.

    The question I think you should be asking is: How often do users actually reload with Ctrl + F5? I doubt it is very often. If you don’t know for sure (eg. analytics), then I wouldn’t worry about it.

    Taking a step back, the primary reason to have the text place-holders is for accessibility (screen readers and such). There are other ways to preserve the accessibility without rendering any visible text as outlined here. This way you don’t waste your time trying to satisfy some weird UX thing and you preserve accessibility.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search