Exclure script du preloader

Exclure script du preloader - Javascript/Node.js - Programmation

Marsh Posté le 14-01-2022 à 00:16:53    

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. })

Reply

Marsh Posté le 14-01-2022 à 00:16:53   

Reply

Marsh Posté le 14-01-2022 à 07:53:25    

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>


 

Reply

Marsh Posté le 14-01-2022 à 12:10:44    

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
Reply

Marsh Posté le 14-01-2022 à 13:42:09    

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
Reply

Marsh Posté le 14-01-2022 à 14:29:26    

ç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
Reply

Marsh Posté le 14-01-2022 à 14:33:13    

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 ?

Reply

Marsh Posté le 14-01-2022 à 14:49:55    

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
Reply

Marsh Posté le 14-01-2022 à 15:41:07    

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.)

Reply

Marsh Posté le 14-01-2022 à 15:56:20    

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
Reply

Marsh Posté le 14-01-2022 à 16:45:52    

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
Reply

Marsh Posté le 14-01-2022 à 16:45:52   

Reply

Marsh Posté le 14-01-2022 à 17:13:06    

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
Reply

Marsh Posté le 14-01-2022 à 17:25:19    

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
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed