Comment éviter le "scintillement" ?

Par défaut, le code javascript / jQuery que vous écrivez est exécuté à Document ready. Cela signifie que la page entière est chargée avant que vos modifications ne soient effectuées. Cela peut parfois provoquer un "scintillement" (flickering).

Vous pouvez éviter cela en changeant la façon dont Symplify exécute le javascript / jQuery. Pour ce faire, vous devez d'abord ajouter /* no_doc_ready */ en haut du code dans l'onglet javascript / jQuery.

/* Écrivez du code javascript / jQuery ici! */
/* no_doc_ready */

Éléments importants à prendre en considération pour l'utilisation /* no_doc_ready */

• Pensez toujours à utiliser des intervalles et vérifiez que l'élément que vous souhaitez modifier existe sur la page avant d'effectuer vos modifications.
• Utilisez des noms de variables uniques dans vos fonctions d'intervalle afin qu'elles n'entrent pas en conflit avec d'autres variables que vous utilisiez auparavant (dans d'autres projets). Conseil : utilisez l'ID du projet à la fin du nom de la variable.
• Si vous faites référence à deux ou plusieurs éléments dans votre code, vous devez vérifier qu'ils existent tous avant d'apporter vos modifications.
• Ne fixez pas tous les changements dans un intervalle énorme. Faites des intervalles séparés pour chaque changement (voir l'exemple ci-dessous).
• Fixez toujours un timeout sur "Document ready" qui efface tous vos intervalles, pour éviter  des intervalles actifs si un élément que vous avez vérifié n'existait pas pour une raison quelconque.

Un élément

Dans l'exemple ci-dessous, nous modifions un élément. Nous changeons le titre du produit à Symplify.

/* no_doc_ready */

var change_product_title_192491281 = setInterval(function (){
    if($('.product-title h1').length > 0) { // Vérifie que l'élément que vous voulez changer existe réellement. 
        clearInterval(change_product_title_192491281); // Effacez l'intervalle après que l'élément ait été trouvé/soit existant pour que les changements ne se produisent qu'une seule fois.
        $('.product-title h1').text('Symplify'); // Faites vos changements.
    }
},10); // intervals running every ten milliseconds. 

$(document).ready(function (){ // lorsque la page a été chargée.
    setTimeout(function (){ // fixer un délai pour s'assurer que chaque élément a été chargé, même ceux qui arrivent après que le document soit prêt.
        clearInterval(change_product_title_192491281); // Efface l'intervalle sur le Document ready si l'élément n'a pas été trouvé, afin que l'intervalle ne continue pas à défiler.
    },5000); // this timeout is set on 5 seconds.
});

Deux éléments ou plus

Dans l'exemple ci-dessous, nous modifions deux éléments. Nous déplaçons le conteneur de l'image à gauche du conteneur de la description du produit.


Il est important de se rappeler;

• Vérifiez toujours que les deux (tous les) éléments auxquels vous faites référence existent dans votre déclaration "if".

/* no_doc_ready */

var move_image_to_left_192491281 = setInterval(function (){ 
    if($('.content-left').length > 0 && $('.content-right').length > 0) { // Vérifiez que les deux éléments que vous voulez changer existent réellement. 
        clearInterval(move_image_to_left_192491281); // Effacez l'intervalle après que l'élément ait été trouvé/existant pour que les changements ne se produisent qu'une seule fois.
        $('.content-left').before($('.content-right')); // Faites vos changements.
    }
},10); // intervalles de dix millisecondes. 

$(document).ready(function (){ // lorsque la page a été chargée
    setTimeout(function (){ // fixer un délai pour s'assurer que chaque élément a été chargé, même ceux qui arrivent après que le document soit prêt.
        clearInterval(move_image_to_left_192491281); // Effacez l'intervalle sur le document prêt si l'élément n'a pas été trouvé afin que l'intervalle ne continue pas à défiler.
    },5000); // this timeout is set on 5 seconds
});

Les deux changements combinés

Dans l'image ci-dessous, vous voyez comment nous avons combiné les deux exemples. Notez que nous n'utilisons qu'une seule fonction "Document ready" pour effacer tous les intervalles et que les deux modifications ont leurs propres intervalles et ne dépendent donc pas l'une de l'autre.