Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1677 connectés 

  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  Exclure script du preloader

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Exclure script du preloader

n°2406888
entropi
Posté le 14-01-2022 à 00:16:53  profilanswer
 

Salut  :hello: (j'ai refait un topic car j'ai finalement trouvé d'où venait mon souci de chargement).
 
J'ai un petit script js qui fait un effet fade out au chargement de ma page, seulement la page met pas mal de temps à s'afficher, car l'effet ne se déclenche que quand tout est chargé si j'ai bien compris.
 
Est-ce que c'est possible d'exclure un script du prealoader ? Car quand j’intègre le script paypal ((c'est un script externe je précise) sur mes pages il faut bien 2/3 secondes avant que la page ne s'affiche, à cause ce de preloader donc.  
 
 

Code :
  1. 'use strict';
  3. $(window).on('load', function() {
  4.   $('#preloader').delay(350).fadeOut('slow');
  5. })

mood
Publicité
Posté le 14-01-2022 à 00:16:53  profilanswer
 

n°2406892
David Bori​ng
Posté le 14-01-2022 à 07:53:25  profilanswer
 

Tu peux charger le script de Paypal avec un délai.
Trois seconde dans cet exemple.

Code :
  1. <script>
  2.     window.addEventListener( 'load', function() {
  3.         setTimeout( function() {
  4.             var s = document.createElement("script" ), el = document.getElementsByTagName("script" )[0];
  5.             s.async = true;
  6.             s.src = 'https://paypal-url.js';
  7.             el.parentNode.insertBefore(s, el);
  8.         }, 3000 );
  9.     } );
  10. </script>


 

n°2406922
entropi
Posté le 14-01-2022 à 12:10:44  profilanswer
 

Salut, j'ai placé ça dans mon fichier js mais ça n'a pas d'effet (je n'ai aucune compétence en js je précise, je ne sais même pas si je l'ai placé correctement  [:moonbloood:2] ).

 
Code :
  1. 'use strict';
  3. $(window).on('load', function() {
  4.   $('#preloader').delay(350).fadeOut('slow');
  5. })
  7. window.addEventListener( 'load', function() {
  8.         setTimeout( function() {
  9.             var s = document.createElement("script" ), el = document.getElementsByTagName("script" )[0];
  10.             s.async = true;
  11.             s.src = 'https://www.paypal.com/sdk/js?client-id=MONID-&enable-funding=venmo&currency=EUR';
  12.             el.parentNode.insertBefore(s, el);
  13.         }, 3000 );
  14.     } );
 

Quand je place le code exactement comme tu me l'as donné dans mon head (en remplacent s.scr par mon lien du script paypal) j'ai le bouton paypal qui ne s'affiche plus sur ma page.

 


C'est plus compliqué d'exclure certains fichiers plutôt que les charger avec un délai ?

 

Le lien exact du script paypal :

 
Code :
  1. <script src="https://www.paypal.com/sdk/js?client-id=monid-&enable-funding=venmo&currency=EUR" data-sdk-integration-source="button-factory"></script>
 

le fait qu'il manque

Code :
  1. data-sdk-integration-source="button-factory"
 

ça peut jouer j'imagine ?


Message édité par entropi le 14-01-2022 à 12:30:48
n°2406925
mechkurt
Posté le 14-01-2022 à 13:42:09  profilanswer
 

En simplifiant :

Code :
  1. 'use strict';
  3. $(window).on('load', function() {
  4.   $('#preloader').delay(350).fadeOut('slow');
  5.   var s = document.createElement("script" ), el = document.getElementsByTagName("script" )[0];
  6.   s.async = true;
  7.   s.data-sdk-integration-source = 'button-factory';
  8.   s.src = 'https://www.paypal.com/sdk/js?client-id=MONID-&enable-funding=venmo&currency=EUR';
  9.   el.parentNode.insertBefore(s, el);
  10. })


Est-ce que ça fonctionne ?
 
Sinon clic droit => inspecter => as tu des erreurs dans la console ?


---------------
D3
n°2406927
entropi
Posté le 14-01-2022 à 14:29:26  profilanswer
 

ça ne fonctionne pas, là désormais j'ai une page blanche, et dans la console je vois deux erreurs :  
 

Code :
  1. Uncaught ReferenceError: paypal is not defined
  2.     initPayPalButton file:///C:/Users/entropi/Desktop/template/cabin.html:138
  3.     <anonymous> file:///C:/Users/entropi/Desktop/template/cabin.html:174


 
 
 
 
Les lignes 138/174 c'est là ou j'ai placé le bouton
 

Code :
  1. <div id="smart-button-container">
  2.       <div style="text-align: center; max-width: 50%; margin-left: auto; margin-right: auto;">
  3.         <div id="paypal-button-container"></div>
  4.       </div>
  5.     </div>
  6.  
  7.   <script>
  8.     function initPayPalButton() {
  9.       paypal.Buttons({
  10.         style: {
  11.           shape: 'rect',
  12.           color: 'silver',
  13.           layout: 'vertical',
  14.           label: 'buynow',
  15.          
  16.         },
  18.         createOrder: function(data, actions) {
  19.           return actions.order.create({
  20.             purchase_units: [{"description":"Cabane - Impression au format A4 (21x29,7mm) sur papier brillant","amount":{"currency_code":"EUR","value":25}}]
  21.           });
  22.         },
  24.         onApprove: function(data, actions) {
  25.           return actions.order.capture().then(function(orderData) {
  26.            
  27.             // Full available details
  28.             console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
  30.             // Show a success message within this page, e.g.
  31.             const element = document.getElementById('paypal-button-container');
  32.             element.innerHTML = '';
  33.             element.innerHTML = '<h3>Merci pour votre achat!</h3>';
  35.             // Or go to another URL:  actions.redirect('thank_you.html');
  36.            
  37.           });
  38.         },
  40.         onError: function(err) {
  41.           console.log(err);
  42.         }
  43.       }).render('#paypal-button-container');
  44.     }
  45.     initPayPalButton();
  46.   </script>


 
 
 
 
 
et l'autre erreur :
 

Code :
  1. Uncaught SyntaxError: invalid assignment left-hand side


Message édité par entropi le 29-05-2022 à 17:51:17
n°2406928
entropi
Posté le 14-01-2022 à 14:33:13  profilanswer
 

Mais sinon je pensais, ce serait pas possible d'enlever le preloader, et juste créer un effet de fadout en js, css ou autre, qui se déclenche après 500ms indépendamment de ce qui est chargé ou non ?
 
Ce serait plus simple non ?

n°2406932
mechkurt
Posté le 14-01-2022 à 14:49:55  profilanswer
 

Oui ce serait plus simple mais si ton site est chargé en 500ms sur tout les périphériques tu n'as pas besoin de preloader ! ^^
 
Ta page pèse combien (inspecter => onglet réseau).
 
Il faut que ton bouton soit initialisé quand le script paypal à été chargé, donc faudrait faire un onload de ton script paypal qui initialise le bouton.

Code :
  1. function initPayPalButton() {
  2.       paypal.Buttons({
  3.         style: {
  4.           shape: 'rect',
  5.           color: 'silver',
  6.           layout: 'vertical',
  7.           label: 'buynow',
  8.        
  9.         },
  10.         createOrder: function(data, actions) {
  11.           return actions.order.create({
  12.             purchase_units: [{"description":"Cabane - Impression au format A4 (21x29,7mm) sur papier brillant","amount":{"currency_code":"EUR","value":25}}]
  13.           });
  14.         },
  15.         onApprove: function(data, actions) {
  16.           return actions.order.capture().then(function(orderData) {
  17.          
  18.             // Full available details
  19.             console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
  20.             // Show a success message within this page, e.g.
  21.             const element = document.getElementById('paypal-button-container');
  22.             element.innerHTML = '';
  23.             element.innerHTML = '<h3>Merci pour votre achat!</h3>';
  24.             // Or go to another URL:  actions.redirect('thank_you.html');
  25.          
  26.           });
  27.         },
  28.         onError: function(err) {
  29.           console.log(err);
  30.         }
  31.       }).render('#paypal-button-container');
  32.     }
  33. $(window).on('load', function() {
  34.   $('#preloader').delay(350).fadeOut('slow');
  35.   var s = document.createElement("script" ), el = document.getElementsByTagName("script" )[0];
  36.   s.async = true;
  37.   s.data-sdk-integration-source = 'button-factory';
  38.   s.src = 'https://www.paypal.com/sdk/js?client-id=MONID-&enable-funding=venmo&currency=EUR';
  39.         s.addEventListener( 'load', function() {
  40.             initPayPalButton();
  41.         }
  42.   el.parentNode.insertBefore(s, el);
  43. })


Ou un truc du genre, là c'est un peu moche pacqu'on mélange du javascript "vanilla" et du Jquery mais bon...

Message cité 1 fois

---------------
D3
n°2406941
entropi
Posté le 14-01-2022 à 15:41:07  profilanswer
 

mechkurt a écrit :

Oui ce serait plus simple mais si ton site est chargé en 500ms sur tout les périphériques tu n'as pas besoin de preloader ! ^^
 
Ta page pèse combien (inspecter => onglet réseau).
 


 
 
En fait ça dépend des pages, sur celles avec pas mal de photos + bouton paypal c'est un peu lent.
 
44 requêtes
2,32 Mo / 1,34 Mo transférés
Terminé en : 2,79 s
DOMContentLoaded: 357 ms
load: 2,03 s
 
 
C'est surtout l'effet de fadout quand on arrive sur la page qui m'intéresse en fait.  
 
Il doit surement y avoir de multiples façons d'optimiser l'affichage des pages, déjà je vais finir de passer toutes mes images en .webp pour gagner un peu de poids. Mais j'ai l'impression que c'est surtout les scripts qui posent problème ( font awesome, google fonts, paypal etc.)

n°2406949
David Bori​ng
Posté le 14-01-2022 à 15:56:20  profilanswer
 

Tu peux facilement te passer de font awesome et google fonts
Avec un sprite SVG et les fonts en local
https://icomoon.io/app/
https://google-webfonts-helper.herokuapp.com/
 
Sinon, tu peux faire simplement une animation en CSS
https://www.geeksforgeeks.org/how-t [...] using-css/

Message cité 1 fois
Message édité par David Boring le 14-01-2022 à 15:57:08
n°2406956
entropi
Posté le 14-01-2022 à 16:45:52  profilanswer
 

David Boring a écrit :


 
Sinon, tu peux faire simplement une animation en CSS
https://www.geeksforgeeks.org/how-t [...] using-css/


 
 
C'est ce que j'ai fait et ça fonctionne très bien, c'est vrai que finalement c'était beaucoup plus simple et du coup j'ai enlevé le preloader.
 
D'ailleurs je suis pas sûr de bien en comprendre l'utilité, ça sert à charger tous les éléments de la page (scripts inclus) avant de l'afficher c'est ça?


Message édité par entropi le 14-01-2022 à 16:46:06
mood
Publicité
Posté le 14-01-2022 à 16:45:52  profilanswer
 

n°2406963
mechkurt
Posté le 14-01-2022 à 17:13:06  profilanswer
 

Nan, le preloader JS masque le contenu tant que la page n'est pas complétement chargé (window.load) alors que le css masque et affiche au bout d'un temps fixe sans se préoccuper du chargement du contenu (car il n'en a pas la moindre idée ^^).


---------------
D3
n°2406965
entropi
Posté le 14-01-2022 à 17:25:19  profilanswer
 

Ah oui mais ça j'avais bien compris  :D  je suis un branque mais il y a des limites  :o  
 
 
Je demandais l’intérêt du preloader, (surtout dans mon cas). Car mis à part me ralentir l'affichage ça faisait pas grand chose  :o
Car bon ajouter un délais de 3s de chargement pour afficher un bouton en bas de page  :whistle:


Message édité par entropi le 14-01-2022 à 17:26:07

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  Exclure script du preloader

 

Sujets relatifs
Utilisation de script VBS avec récupération de l'utilisateur courant p[Powershell] Script pour clonage groupes Office 365
Saisie d'un mdp auto dans un scriptScript Backup
aide pour script microsoft visual basicImpossible d'exécuter un script Python
Formation Java Script lacune en mathAide sur une amélioration d'un script powershell
EOFError lors du boot sur un script .py[PowerShell]Extraire un ID matériel
Plus de sujets relatifs à : Exclure script du preloader

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.115 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR