web-dev-qa-db-fra.com

Javascript après les autres scripts (y compris les scripts asynchrones)

J'ai un script que je voudrais inclure avec Wordpress. Ce script repose sur un autre logiciel (prettyPhoto) à exécuter, ainsi que sur le chargement de JQuery. J'aimerais que mon script soit le dernier script à être inclus sur la page.

Après avoir lu comment utiliser wp_enqueue_scipt dans cette réponse: https://stackoverflow.com/a/19914138/1745715

Et après que favorate soit assez agréable pour me guider à travers un peu de débogage dans les commentaires ci-dessous, j'ai constaté que je ne pouvais pas mettre en file d'attente mon script, car le dernier script à charger (themify.gallery.js, je me suis trompé dans le les commentaires ci-dessous quand je pensais que c'était carousel.js) se font de manière asyncronique dans une fonction du fichier javascript de Themify appelé main.js (themes/themify-ultra/themify/js/main.js)

Voici où il est chargé:

    InitGallery: function ($el, $args) {
        var lightboxConditions = ((themifyScript.lightbox.lightboxContentImages && $(themifyScript.lightbox.contentImagesAreas).length && themifyScript.lightbox.lightboxGalleryOn) || themifyScript.lightbox.lightboxGalleryOn) ? true : false;
        if ($('.module.module-gallery').length > 0 || $('.module.module-image').length > 0 || $('.lightbox').length || lightboxConditions) {
            if ($('.module.module-gallery').length > 0)
                this.showcaseGallery();
            this.LoadAsync(themify_vars.url + '/js/themify.gallery.js', function () {
                Themify.GalleryCallBack($el, $args);
            }, null, null, function () {
                return ('undefined' !== typeof ThemifyGallery);
            });
        }
    },

Il serait logique que je puisse simplement ajouter mon javascript ici dans cette fonction après la ligne qui charge themify.gallery.js. Cependant, je veux être sûr de pouvoir mettre à jour mon thème themify sans provoquer la perte du changement. Pour résoudre ce problème, j'utilise un thème pour enfants. Comme ce fichier main.js se trouve dans le dossier themes, est-il possible de l’écraser de la même manière que je le ferais avec un fichier de modèle normal et d’apporter mes modifications? Même si c'est le cas, est-il vraiment prudent de remplacer le fichier main.js en entier lorsque je suis préoccupé par ma capacité à mettre à niveau Themify ultérieurement? Ou existe-t-il un moyen moins destructif d’injecter mon code d’inclusion dans cette fonction à partir d’ailleurs? Ouvert aux suggestions sur la meilleure solution.

javascriptwp-enqueue-script
1
carbide20

Après quelques lectures, j'ai constaté qu'il n'était pas possible d'écraser une fonction dans un fichier JS de cette manière. La solution consistait à écraser l'intégralité du fichier main.js afin d'effectuer les modifications. J'ai ensuite mis en file d'attente mon nouveau script main.js avec exactement le même nom que celui dans lequel il avait été enregistré:

// Enqueue main js that will load others needed js
wp_register_script('themify-main-script', '/wp-includes/js/main.js', array('jquery'), THEMIFY_VERSION, true);
wp_enqueue_script('themify-main-script');
1
carbide20

J'aurais simplement commenté votre message en premier, mais je n'ai pas assez de réputation ...: /

Tous les autres scripts sont-ils chargés via wp_enqueue_script?

Si vous var_dump( $GLOBALS['wp_scripts']->registered );, vous pouvez voir tous les scripts enregistrés/mis en file d'attente (via wp_enqueue_script: comment changer l'ordre de chargement des scripts? )

Vous devriez pouvoir changer le descripteur de dépendance (array('jquery')) dans votre wp_register_script en array('handle-of-last-enqueued-script'). Ainsi, votre script ne sera pas chargé tant que ce n’est pas le cas.

0
fostertime