créer une page preloader facile pour tous |
Répondre | Page 12> |
Auteur |
Sujet Recherche Options des sujets
|
|||||
brolysan
Admin Group Depuis le: 14 Août 2009 Pays: France Status: Inactif Points: 10144 |
Options des messages
Thanks(0)
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 :
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 :
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 :
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 :
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 :
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 :
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 |
||||||
Larsene
Admin Group Depuis le: 05 Mar 2012 Pays: France Status: Inactif Points: 5388 |
Options des messages
Thanks(1)
|
|||||
Hello Brolysan ! Beau tutoriel pour les utilisateurs de OE !
(le prochain, comment charger des images adaptées sur le périphérique utilisé pour voir le site, histoire d'optimiser le chargement ? ) |
||||||
brolysan
Admin Group Depuis le: 14 Août 2009 Pays: France Status: Inactif Points: 10144 |
Options des messages
Thanks(0)
|
|||||
Tutoriel mise à jour avec une version ne nécessitant pas le transfert manuel du gif.
@Larsène : peux tu me traduire ta demande là?
Edité par brolysan - 29 Août 2016 à 11:28 |
||||||
Dmit OE
Admin Group Depuis le: 31 Mai 2012 Status: Inactif Points: 13971 |
Options des messages
Thanks(0)
|
|||||
@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.
|
||||||
Maurice306
Senior Member Depuis le: 20 Avr 2008 Pays: France Status: Inactif Points: 2066 |
Options des messages
Thanks(1)
|
|||||
PFOUUUU ! que d'idées pour tous et bravo pour tous ces compléments, sur que ça va inciter à refaire des sites
Merci pour toutes ces belles choses
|
||||||
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 !!!
|
||||||
Larsene
Admin Group Depuis le: 05 Mar 2012 Pays: France Status: Inactif Points: 5388 |
Options des messages
Thanks(0)
|
|||||
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... |
||||||
Dmit OE
Admin Group Depuis le: 31 Mai 2012 Status: Inactif Points: 13971 |
Options des messages
Thanks(0)
|
|||||
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?
|
||||||
ridp
Senior Member Depuis le: 18 Nov 2007 Pays: France Status: Inactif Points: 286 |
Options des messages
Thanks(0)
|
|||||
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
|
||||||
Hobby001
Admin Group Modérateur Depuis le: 14 Feb 2015 Pays: Canada, Québec Status: Inactif Points: 6507 |
Options des messages
Thanks(0)
|
|||||
Avez-vous tenté de le faire?
Avec quels résultats?
|
||||||
ridp
Senior Member Depuis le: 18 Nov 2007 Pays: France Status: Inactif Points: 286 |
Options des messages
Thanks(0)
|
|||||
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
|
||||||
Répondre | Page 12> |
Tweet
|
Aller au Forum | Permissions du forum Vous ne pouvez pas écrire un nouveau Sujet Vous ne pouvez pas répondre aux Sujets Vous ne pouvez pas effacer vos messages Vous ne pouvez pas éditer vos messages Vous ne pouvez pas créer des sondages Vous ne pouvez pas voter dans les sondages |