Antivirus offre spéciale - jusqu'à 60 % de réduction avec openElement !
Accueil Forum Accueil Forum >

openElement

> Tutoriaux utilisateurs
  Nouveaux messages Nouveaux messages Fil RSS  - créer une page preloader facile pour tous
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

créer une page preloader facile pour tous

 Répondre Répondre Page  12>
Auteur
Message
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 9482
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Sujet: créer une page preloader facile pour tous
    Envoyé : 28 Août 2016 à 11:09
Bonjour à tous,

Voici un petit tutoriel pour avoir une page de preloader simple à mettre en place pour votre site web.


Pour commencer, créer un calque appelé preloader
Pas de calque associé (sauf si vous avez créez un calque pas du code spécifique avant mais ne servant pas de fond à votre site)



Largeur de la page : 100%


Une fois votre calque créé, cliquez sur l'icône Responsive



Travaillant principalement en responsive maintenant, je choisis la position des éléments en Relative et je coche auto.
Décocher aussi le footer (bas du cadre).
Normalement, en relative, cela devrait aussi fonctionner (à tester néanmoins).

Cliquez sur la croix en haut à droite pour fermer la fenêtre.

Créer un bloc de code Source sur le calque.
Changer le Type en le passant sur CSS
Laisser la position en Header

Mettez ce code :

body {
    overflow: hidden;
}

/* Preloader */

#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff; /* change if the mask should have another color then white */
    z-index:9999999; /* makes sure it stays on top */
}

#status {
    width:250px;
    height:250px;
    position:absolute;
    left:50%; /* centers the loading animation horizontally one the screen */
    top:50%; /* centers the loading animation vertically one the screen */
    background-image:url(Files/Image/preloader.gif); /* path to your loading animation */
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px; /* is width and height divided by two */
}

Le texte en rouge représente le lien de l'image de la roue tournant. Il doit s'agir d'un gif.
Voici celui utilisé et le lien pour le récupérer.


Comme vous pouvez le voir dans le code CSS, le lien est Files/Image/preloader.gif , cela veut dire que notre image doit se trouver dans le dossier Files puis Image.
Pour la mettre, il vous faut cliquez sur le menu Projet puis sur l'icône Ressources.
Mettez l'image preloader.gif à la racine. Si vous changez de nom d'image ou de lien, pensez à modifier le code CSS en conséquence.

Passons au code source suivant.
Mettez un bloc de code source de nouveau sur le calque.
Laissez le type par défaut Javascript ainsi que son emplacement.
Mettez ce code :

(function(){

var tID = null;
function onContentLoaded() {
// call only once:
$(window).off('load.oePreloader');
clearTimeout(tID);
// remove preloader:
$('#status').fadeOut(); // will first fade out the loading animation
$('#preloader').delay(250).fadeOut('slow'); // will fade out the white DIV that covers the website.
$('body').css({'overflow':'visible'});
}
$(function(){
var tID = setTimeout(onContentLoaded, 7000); // wait max 7 seconds after the page structure is loaded
})
$(window).on('load.oePreloader', onContentLoaded); // make sure the whole site is loaded

})();

laissez par défaut si le temps vous convient. En fonction d'éventuelles demandes, je donnerai les modifications à apporter à ce code pour rallonger le temps du fade out de la page ou le prolongement de l'animation. Ce code Javascript donne l'ensemble des indications sur le bon déroulement du preloader. Ce code se sert du code Javascript que fournit Openelement, donc vous n'avez rien à charger en plus.

Maintenant, dernière phase pour finaliser le calque.
Créez de nouveau un autre bloc de code source sur le calque.
Changez son type en le mettant en Html et mettez sa position en StartBody
Mettez ce code :


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

Mettant, votre calque est prêt. Si vous avez déjà créé un calque avec votre menu et votre fond, allez sur celui-ci.
Et cliquez sur l'onglet Page et cliquez sur l'onglet marqué Aucun et chargez le calque preloader.
faites une prévisualisation.

Question :
tout se passe bien en local mais une fois en ligne, je ne vois pas l'image de chargement ?
Malheureusement, Openelement ne transfère pas les images qui ne sont pas posées sur un calque ou une page. Pour cela, il va vous falloir allez sur l'onglet Projet puis cliquez sur l'icône Ressources.
Sélectionnez l'image preloader.gif et cliquez sur l'icône Mettre en ligne (le deuxième en partant de la droite).
Maintenant vous devriez avoir votre image chargée.


-------------------------------------------------------------------------------------------------------------------

Tutoriel avec image dans le calque :

Voici une autre version du tutoriel pour intégrer l'image dans le calque sans devoir obligatoirement faire une mise en ligne manuelle.

Pour commencer, créer un calque appelé preloader
Pas de calque associé (sauf si vous avez créez un calque pas du code spécifique avant mais ne servant pas de fond à votre site)



Largeur de la page : 100%


Une fois votre calque créé, cliquez sur l'icône Responsive



Travaillant principalement en responsive maintenant, je choisis la position des éléments en Relative et je coche auto.

Sélectionnez maintenant le footer (bas du cadre) et passez en relative. et mettez une hauteur de 50 pixels.



Cliquez sur la croix en haut à droite pour fermer la fenêtre.

Créer un bloc de code Source sur le calque.
Changer le Type en le passant sur CSS
Laisser la position en Header

Mettez ce code :

body {
    overflow: hidden;
}

/* Preloader */

#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff; /* change if the mask should have another color then white */
    z-index:9999999; /* makes sure it stays on top */
}

#status {
    width:250px;
    height:250px;
    position:absolute;
    left:50%; /* centers the loading animation horizontally one the screen */
    top:50%; /* centers the loading animation vertically one the screen */
    background-image:url(Files/Image/preloader.gif); /* path to your loading animation */
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px; /* is width and height divided by two */
}

Le texte en rouge représente le lien de l'image de la roue tournant. Il doit s'agir d'un gif.
Voici celui utilisé et le lien pour le récupérer.


Comme vous pouvez le voir dans le code CSS, le lien est Files/Image/preloader.gif , cela veut dire que notre image doit se trouver dans le dossier Files puis Image.
Pour la mettre, il vous faut cliquez sur le menu Projet puis sur l'icône Ressources.
Mettez l'image preloader.gif à la racine. Si vous changez de nom d'image ou de lien, pensez à modifier le code CSS en conséquence.
Nous allons maintenant importer cette image gif dans le calque MAIS dans le footer IMPÉRATIVEMENT.





Il va falloir aussi lui changer son ID. Pour cela, sélectionnez l'élément image et sur le menu de droite, onglet Propriétés.


Cliquez sur les 3 points à droite. 
Dans la nouvelle fenêtre, changez l'ID par PRELOADIMG



Faites appliquer ensuite.

Passons au code source suivant.
Mettez un bloc de code source de nouveau sur le calque.
Laissez le type par défaut Javascript ainsi que son emplacement.
Mettez ce code :

(function(){

var tID = null;
$('#status').css('background-image', 'url("' + $('#PRELOADIMG').find('img').attr('src') + '")');
function onContentLoaded() {
// call only once:
$(window).off('load.oePreloader');
clearTimeout(tID);
// remove preloader:
$('#status').fadeOut(); // will first fade out the loading animation
$('#preloader').delay(250).fadeOut('slow'); // will fade out the white DIV that covers the website.
$('body').css({'overflow':'visible'});
}
$(function(){
var tID = setTimeout(onContentLoaded, 7000); // wait max 7 seconds after the page structure is loaded
})
$(window).on('load.oePreloader', onContentLoaded); // make sure the whole site is loaded

})();

laissez par défaut si le temps vous convient.

Maintenant, dernière phase pour finaliser le calque.
Créez de nouveau un autre bloc de code source sur le calque.
Changez son type en le mettant en Html et mettez sa position en StartBody
Mettez ce code :


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

Mettant, votre calque est prêt. Si vous avez déjà créé un calque avec votre menu et votre fond, allez sur celui-ci.
Et cliquez sur l'onglet Page et cliquez sur l'onglet marqué Aucun et chargez le calque preloader.
faites une prévisualisation.


Edité par brolysan - 29 Août 2016 à 11:26
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5383
Options des messages Options des messages   Thanks (1) Thanks(1)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 29 Août 2016 à 08:48
Hello Brolysan ! Beau tutoriel pour les utilisateurs de OE ! Beer

(le prochain, comment charger des images adaptées sur le périphérique utilisé pour voir le site, histoire d'optimiser le chargement ? Party)
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 9482
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 29 Août 2016 à 11:27
Tutoriel mise à jour avec une version ne nécessitant pas le transfert manuel du gif.

@Larsène : peux tu me traduire ta demande là? Embarrassed


Edité par brolysan - 29 Août 2016 à 11:28
Haut de la page
Dmit OE allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 31 Mai 2012
Status: Inactif
Points: 14004
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Dmit OE Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 29 Août 2016 à 12:47
@Larsene: si on specifie des images de fond different selon les media queries, les images correspondantes seront chargées. Pour l'element Image, je crois que Mick a fait le gestion assez poussé, mais je ne sais pas si ce sera disponible prochainement.
Haut de la page
Maurice306 allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 20 Avr 2008
Pays: France
Status: Inactif
Points: 2078
Options des messages Options des messages   Thanks (1) Thanks(1)   Citer Maurice306 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 29 Août 2016 à 17:18
Wacko PFOUUUU ! que d'idées pour tous et bravo pour tous ces compléments, sur que ça va inciter à refaire des sites Clap

Merci pour toutes ces belles choses Thumbs Up
La vie est belle !!!....., elle est comme chacun se la fait. Ne soyez pas pressé, partez plus tôt, car il n'y a pas de personnes pressée elles ne sont qu'en retard !!!
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5383
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 29 Août 2016 à 17:59
Message posté par brolysan brolysan a écrit:

@Larsène : peux tu me traduire ta demande là? Embarrassed


Pour économiser nos précieux octets, et améliorer l'expérience Web des utilisateurs, généralement - sur des sites pro - chaque image est déclinée et réenregistrée au format le plus adéquat correspondant au médias.

Ainsi, un élément image devrait au minimum avoir 3 images : une pour chargement sur smartphone (très petite, optimisée sur réseau mobile), une "intermédiaire" et une haute résolution.

C'est bien ainsi que Dmit a compris ma requête, mais sauf erreur de ma part, il semble - sauf erreur de ma part dans mon test - que sur un terminal mobile, il charge alors l'image intégrée en média par défaut puis l'image correspondant à la média queries...
Haut de la page
Dmit OE allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 31 Mai 2012
Status: Inactif
Points: 14004
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Dmit OE Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 29 Août 2016 à 21:47
Et si on fait comme Bootstrap v3 - traite media par defaut comme les styles mobiles puis les surcharge pour des grandes ecrans (ex. min-width: 1025px)? Je pense que ca chargera toujours la petite image plus eventuellement une image plus grande? 
Apres, en cas de rotations - si on tourne l'appareil - ca recharge l'ensemble des images si le media query change?
Haut de la page
ridp allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 18 Nov 2007
Pays: France
Status: Inactif
Points: 258
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer ridp Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 11 Nov 2019 à 18:30
Bonjour,
je voudrais bien installer un loader sur mon site utilisant le tout premier tamplate responsive de openelement: Responsive 01

il y a t'il des manipulations autres que ceux évoqués plus haut surtout que j'ai mis sur l’ouverture du site le plugin vegas.

Merci
Bevet Breizh
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 4832
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 11 Nov 2019 à 20:48
Avez-vous tenté de le faire?

Avec quels résultats?
Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose de gros.
Haut de la page
ridp allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 18 Nov 2007
Pays: France
Status: Inactif
Points: 258
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer ridp Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 11 Nov 2019 à 22:50
Bonsoir,
j'ai déjà essayer effectivement de le faire mais sans succès, de plus le tuto a perdu toutes ces images.
le template responsive 01 est très capricieux à manipuler je vais essayer de nouveau en faisant une sauvegarde bien sur avant.
Quel temps fait-il au Québec?

merci
Bevet Breizh
Haut de la page
 Répondre Répondre Page  12>
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 10.18
Copyright ©2001-2014 Web Wiz Ltd.

Cette page a été affichée en 0,047 secondes.
Acheter votre vélo en ligne