11521 sujets

JavaScript, DOM et API Web HTML5

Charger un préloader seulement quelques secondes

Bonjour à tous,
Sur mon site Internet, j'ai un preloader qui s'affiche au moment du chargement de ma page.
C'est une très bonne chose, mais le preloader ne disparait que quand tous les élements de la page ont été chargés.
Ca prend un temps fou, car j'ai pas mal d'extensions wordpress qui affichent du JS dans le footer du site. Mais je peux difficilement faire autrement.
Comme je ne souhaite pas supprimer ce preloader, car il reste néanmoins très utile. Je pensais revoir mon code JS ci-dessous, pour faire en sorte que le Preloader disparaisse après un certains laps de temps. Genre 1 seconde.
Je ne vois pas l'intérêt actuellement d'attendre que tous les éléments du site soit chargés pour que l'internaute puisse voir tout ce qui est au dessus de la ligne de flottaison.

J'aimerai avoir vos avis, et éventuellement une solution pour répondre à mon problème Smiley cligne

Merci d'avance 


<body>
<div id="preloader">
        <div class="sk-spinner sk-spinner-wave">
            <div class="sk-rect1"></div>
            <div class="sk-rect2"></div>
            <div class="sk-rect3"></div>
            <div class="sk-rect4"></div>
            <div class="sk-rect5"></div>
        </div>
    </div> 
    <!-- End Preload -->

    <div class="layer"></div>
    <!-- Mobile menu overlay mask -->


/* ==============================================
	Preload
=============================================== */
$(window).load(function() { // makes sure the whole site is loaded
	$('#status').fadeOut(); // will first fade out the loading animation
	$('#preloader').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website.
	$('body').delay(350).css({'overflow':'visible'});
	$(window).scroll();
})

Modifié par dreadstock (30 Jan 2017 - 18:30)
Pourquoi mettre cet effet, ton site apparaît cassé sans ça ?

Pour moi ce n'est pas une bonne idée d'arrêter ton animation de chargement car tu n'as aucune idée du temps que la page va mettre à se charger.
En effet, si j'enlève le preloader, j'ai quelques élements que l'on voit ce mettre en place (des btn notamment) et c'est un peu moche. C'est pourquoi on met le preloader en place.
Aujourd'hui, le preloader reste beaucoup trop longtemps, ca saoule les internautes. Je pense que le laissé en place 1 seconde est un bon compris pour l'utilisateur et pour que le site au dessus de la ligne de flottaison soit bien chargé.
Salut,

Plutôt que de modifier le preloader, as-tu déjà fait tout ce qui était possible pour optimiser ta page ? D'après ton explication, on dirait que ta page met très longtemps à charger, ce qui n'est jamais une bonne chose, avec preloader ou sans.

Si c'est possible, ce serait probablement un meilleur investissement à long terme...
Administrateur
Bonjour,

s'il y a besoin d'un chargement asynchrone et s'il y a besoin d'empêcher d'interagir avec la page tout de suite tout de suite via une animation de loading mais qu'il y a le souci que tu exposes (trop de ressources chargées ainsi donc trop long), je te conseillerais de définir quelles ressources sont indispensables à l'affichage de la page et d'avoir 2 types de ressources chargées : les indispensables à l'affichage et les autres.
Dès que les indispensables sont chargées, tu affiches... et tu continues de charger les autres.

S'il n'y a pas besoin d'empêcher d'interagir avec la page, je te conseillerais de virer le preloader.
S'il est là parce que ça gigote dans tous les sens au fur et à mesure de l'arrivée des ressources, le problème est soluble d'autres manières : ne surtout pas charger en asynchrone la 1ère image d'un slider, placer des min-height, etc

À l'opposé, je déteste les pages à la Medium où il faut scroller pour que les images se chargent : je suis le plus souvent hors ligne quand je lis ces pages et donc pas d'images alors que quelques minutes auparavant j'avais de l'ADSL 30Mbps...

EDIT : de quelles ressources parle-t-on ? Une web app, un slider et quelques images, autre ?
Modifié par Felipe (01 Feb 2017 - 17:44)
Sujet clos
Aller à