Supprimer l'image de preloader

**flamant** · 07/03/2017, 21h16

Bonjour,

je suis en train de faire un site et m'inspire sur un site déjà existant qui a été fait avec WordPress.

Sur ma page d'acceuil, j'ai une animation de preloading dont le code est le suivant

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<body class="home page page-id-269 page-template-default header-layout-boxed content-layout-fullwidth footer-layout-boxed blog-default position-fullwidth sidebar-1-4 tm_pb_builder">
<div class="page-preloader-cover">
  <div class="page-preloader">
    <div class="bounce1"></div>
    <div class="bounce2"></div>
    <div class="bounce3"></div>
  </div>
</div>

avec les classes css suivantes

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
.page-preloader-cover {
	position:fixed;
	z-index:999;
	top:0;
	left:0;
	display:block;
	width:100%;
	height:100%;
	background:url(/wp-content//images/logo-inger-190x180.png) no-repeat;
	background-position:50% 20%
}
.page-preloader-cover {
	background-color:#fff
}
.page-preloader {
	position:relative;
	top:60%;
	left:50%;
	margin-top:-9px;
	margin-left:-45px;
	width:100px;
	text-align:center
}
.page-preloader>div {
	width:18px;
	height:18px;
	display:inline-block;
	-webkit-animation:sk-bouncedelay 1.4s infinite ease-in-out both;
	animation:sk-bouncedelay 1.4s infinite ease-in-out both
}
.page-preloader .bounce1 {
	-webkit-animation-delay:-0.32s;
	animation-delay:-0.32s
}
.page-preloader .bounce2 {
	-webkit-animation-delay:-0.16s;
	animation-delay:-0.16s
}
.page-preloader div {
	background-color:#c642a4
}
 
@-webkit-keyframes sk-bouncedelay {
0%, 80%, 100% {
-webkit-transform:scale(0)
}
40% {
-webkit-transform:scale(1)
}
}
@keyframes sk-bouncedelay {
0%, 80%, 100% {
-webkit-transform:scale(0);
transform:scale(0)
}
40% {
-webkit-transform:scale(1);
transform:scale(1)
}
}

Voici un print screen de l'animation
Nom : Capture d’écran 2017-03-07 à 06.14.57.png
Affichages : 708
Taille : 4,3 Ko

Cette animation consiste en 3 carre de couleur rose juxtaposés qui chacun à leur tour passe d'une taille nulle à une autre taille. Le but est que cette animation apparaisse avant que toute la page se charge, puis l'animation disparait

J'ai copié le code source du site dans Dreamweaver et à partir de ce code source j'essaye d'afficher la page sur mon Browser, seulement l'animation tourne en boucle.

Je suppose que c'est du code javascript qui cache cette animation au chargement de la page, un code du style suivant (en jquery)

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
$('.page-id-269').on('load', function(){
  // hide/remove the loading image
  $('.page-preloader-cover').hide();
});

est-ce à votre avis le cas et si c'est le cas, je ne trouve nul part des inclusion de code javascript. Je ne vois pas où est le javascript et/ou les inclusions de bibliothèques de frameworks javascript. Peut être une mécanique interne de WordPress... Merci d'avance pour vos réponses

**ABCIWEB** · 07/03/2017, 22h00

Oui c'est du jQuery.

Télécharges par exemple jQuery ici puis inclus-le avant ton code javascript, par exemple si tu nommes ton fichier "jquery.js" et que tu le mets dans un dossier nommé "Scripts" :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script  src="Scripts/jquery.js" charset="UTF-8"></script>

Ou tu peux aussi utiliser un cdn (voir plus bas dans le même lien) pour le charger mais personnellement je n'aime pas être dépendant d'un autre serveur que le mien si le script est indispensable à l'affichage du site.

Après je saurais pas te dire où se fait l'inclusion dans wordpress mais bon peu importe ce code est effectivement du jQuery et ce script en a besoin pour fonctionner.

**flamant** · 07/03/2017, 22h10

Bonsoir ABCIWEB et merci pour ta réponse.

Le code JQUERY que j'ai mis est un exemple de ma part pour illustrer la supposition que je fais.

Ma question est

est ce qu'ils cachent la page et animation de preloading par du javascript. Le code JQUERY que je met ne fait pas parti du site dont je m'inspire. C'est une supposition et je demande confirmation si c'est probablement comme ça que l'animation marche

**ABCIWEB** · 07/03/2017, 23h01

D'après le code que tu me montre, l'animation est affichée par défaut sur la page et on la fait disparaître avec jQuery quand elle est chargée.
Cela ne fonctionne pas comme tu veux ?

Après sur le principe le 'load' n'est pas forcément attaché à la page mais plutôt au chargement d'une animation précise si c'est elle qui doit être chargée pour l'affichage de la page. Et puis on ne sert pas toujours de l'événement "onload" qui n'est pas fonctionnel dans tous les cas de figure.

**flamant** · 08/03/2017, 07h07

Merci ABCIWEB pour ta réponse.

Comment explique-tu qu'il n'y ait aucun fichier javascript qui soit inclus dans la page

**thelvin** · 08/03/2017, 13h56

Tu ne penses pas que ce serait plus simple de nous donner directement l'URL ?

**flamant** · 10/03/2017, 05h14

Bonjour thelvin et merci pour ton mesage, oui effectivement, c'est plus simple, voici le lien

http://www.carlotacoiffure.com/

**ABCIWEB** · 10/03/2017, 17h56

Pourquoi dis-tu que ce site n'inclus pas de fichier javascript ? Fais des recherches sur la balise script

Ce site utilise :

- google font api
- nginx
- php
- twitter boostrap
- wordpress
- jquery

Tu peux utiliser une extension comme wappalyzer pour firefox pour avoir ces informations.

**flamant** · 12/03/2017, 09h15

Bonjour ABCIWEB et merci pour ta réponse,

en fait tu me montre les librairies qu'utilisent ce site, mais moi j'avais cherché les fichiers avec une extension ".js" programmé pour ce site. Tu veux dire que la programmation javascript pour ce site est incluse dans les librairies ?