créer une page preloader facile pour tous |
Répondre ![]() |
Page 12> |
Auteur |
![]() ![]() |
|||||
brolysan ![]() Profil des membres
Envoyer un message privé
Trouve les messages des membres
Visiter la page des membres
Ajouter à la liste
Admin Group ![]() ![]() Depuis le: Aug 14 2009 Pays: France Status: Inactif Points: 9488 |
![]() ![]() ![]() ![]() ![]() Envoyé : Aug 28 2016 à 10:09am |
|||||
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 - Aug 29 2016 à 10:26am |
||||||
![]() |
||||||
Larsene ![]() Profil des membres
Envoyer un message privé
Trouve les messages des membres
Visiter la page des membres
Ajouter à la liste
Admin Group ![]() ![]() Depuis le: Mar 05 2012 Pays: France Status: Inactif Points: 5383 |
![]() ![]() ![]() ![]() ![]() |
|||||
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 ![]() Profil des membres
Envoyer un message privé
Trouve les messages des membres
Visiter la page des membres
Ajouter à la liste
Admin Group ![]() ![]() Depuis le: Aug 14 2009 Pays: France Status: Inactif Points: 9488 |
![]() ![]() ![]() ![]() ![]() |
|||||
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 - Aug 29 2016 à 10:28am |
||||||
![]() |
||||||
Dmit OE ![]() Admin Group ![]() ![]() Depuis le: May 31 2012 Status: Inactif Points: 14004 |
![]() ![]() ![]() ![]() ![]() |
|||||
@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 ![]() Profil des membres
Envoyer un message privé
Trouve les messages des membres
Visiter la page des membres
Ajouter à la liste
Senior Member ![]() ![]() Depuis le: Apr 20 2008 Pays: France Status: Inactif Points: 2078 |
![]() ![]() ![]() ![]() ![]() |
|||||
![]() ![]() 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 ![]() Profil des membres
Envoyer un message privé
Trouve les messages des membres
Visiter la page des membres
Ajouter à la liste
Admin Group ![]() ![]() Depuis le: Mar 05 2012 Pays: France Status: Inactif Points: 5383 |
![]() ![]() ![]() ![]() ![]() |
|||||
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: May 31 2012 Status: Inactif Points: 14004 |
![]() ![]() ![]() ![]() ![]() |
|||||
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: Nov 18 2007 Pays: France Status: Inactif Points: 258 |
![]() ![]() ![]() ![]() ![]() |
|||||
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 ![]() Profil des membres
Envoyer un message privé
Trouve les messages des membres
Visiter la page des membres
Ajouter à la liste
Admin Group ![]() ![]() Modérateur Depuis le: Feb 14 2015 Pays: Canada, Québec Status: Inactif Points: 4832 |
![]() ![]() ![]() ![]() ![]() |
|||||
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.
|
||||||
![]() |
||||||
ridp ![]() Senior Member ![]() Depuis le: Nov 18 2007 Pays: France Status: Inactif Points: 258 |
![]() ![]() ![]() ![]() ![]() |
|||||
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 |