web-dev-qa-db-fra.com

Chargeurs Javascript asynchrones

J'aimerais profiter du chargement de mes scripts pendant le chargement de la page. c'est à dire. Yepnope , head.js etc ...

Mais je veux aussi pouvoir mettre le script en file d'attente pour que les autres plugins n'essayent pas d'ajouter les leurs. (a la jquery)

Est-ce que quelqu'un a des suggestions?

Merci d'avance...

jqueryjavascriptwp-enqueue-script
2
Adam

Vous ne pouvez pas avoir les deux: vous utilisez soit wp_enqueue_script () ou head.js

Ou bien, vous effectuez un piratage délirant pour traduire l’arbre de dépendance de script WP en appels head.js.

NB: remplacez head.js par la bibliothèque que vous souhaitez utiliser.

1
scribu

Cela devrait être un commentaire, mais je n'ai pas encore ces privilèges.

Mais si la préoccupation principale est simplement d'éviter la duplication, annulez l'enregistrement du script, puis enregistrez le même script sans source et mettez-le en file d'attente. Essentiellement, wp exécutera un script vierge pour bloquer toutes les versions de son registre/mise en file d'attente.

Ajoutez ensuite le script avec la méthode de votre choix. Je n'ai pas fait de tests approfondis, mais le conseil m'a été fourni ailleurs et, en théorie, il devrait bien fonctionner.

1
David Hobs

Voici ce que je fais pour accomplir cela. Je publie cela comme une solution possible et aussi pour obtenir les réactions de tous ceux qui ont plus WP expériences que moi. Si vous rencontrez des problèmes lors de l’implémentation ou si je n’envisage rien, veuillez me le faire savoir.

Limitations connues:

  • Cela ne fonctionne qu'avec des scripts correctement mis en file d'attente via wp_enqueue_script
  • Il affiche tous les scripts dans le pied de page même s'ils ont été enregistrés pour n'être affichés que dans la section <head> de la page. Cela peut être facile à contourner, mais pour ma mise en œuvre, je le préfère ainsi.

Le problème que j’ai vu avec le plugin head.js était qu’il semblait ne fonctionner que sur les scripts de la section <head>, et qu’il ne permettait aucune fonctionnalité de secours CDN simple, ce qui est un avantage vraiment appréciable de chargement des scripts de cette façon à mon avis.

Ok, voici le code. Cela fait partie d'une classe qui est dans mon plugin de fonctionnalité générale, mais elle pourrait tout aussi bien être dans functions.php ou être organisée d'une autre manière. J'utilise yepnope pour l'instant, mais cela pourrait facilement être modifié pour utiliser un autre chargeur de script.

class example {

    function __construct() {

        /*
        Hook into the script printing functionality and use our own resource loader to load
        scripts in a non-blocking, asynchronous, parallel fancy way
        */
        if( !is_admin() ) {

            add_action( 'wp_print_scripts',  array( &$this, 'deploy_script_loader' ) );
        }       
    }   

    /*
    If we have any javascripts queued for the page, grab the handles of
    all of the ones to be loaded in the header and dequeue them now. 
    Then, we will check again and reload any that weren't queued
    yet in the footer.
    */
    function deploy_script_loader( ) {
        global $wp_scripts;

        if ( !empty( $wp_scripts->queue ) && !is_admin() ) {

            // Get the queue in our class property, and dequeue everything
            foreach ( $wp_scripts->queue as $handle ) {

                /*
                Check if this script is supposed to be loaded in the header (group isn't 1).
                If it is, we'll grab it now and dequeue it. We'll save the rest of the dequeuing
                for the footer script or else we'll miss some scripts that are queued after
                this hook is run.
                */
                if ( 1 !== $wp_scripts->registered[$handle]->extra['group'] ) {

                    /*
                    Just dequeuing a script here isn't enough to prevent it from being
                    printed in the header if another script that we haven't dequeued (ie a footer
                    script) depends on it. So, we need to make sure that all of the
                    scripts we just dequeued will be ok loading in the footer (where they will
                    get dequeued for real before they are printed).
                    */
                    $wp_scripts->registered[$handle]->extra['group'] = 1;
                }
            }

            // Add our hook to load everything in the footer
            add_action( 'wp_footer', array( &$this, 'output_script_loader' ) );
        }       
    }

    /*
    Function to be ran in wp_footer to output the js script loader
    html content.
    */
    function output_script_loader() {
        global $wp_scripts;

    // Process the scripts dependency tree, but don't print anything
    ob_start();
    $script_queue = $wp_scripts->do_items();
    ob_clean();

        // Add our script loader
        echo '<script type="text/javascript" src="' . plugins_url( '/scripts/yepnope.1.0.2-min.js', __FILE__ ) . '"></script><script type="text/javascript">';

        // Loop through the queued scripts and get all of their localization output objects first
        foreach( $script_queue as $handle ) {

            echo $wp_scripts->registered[$handle]->extra['data'];
        }

        echo 'yepnope.errorTimeout = 4000; yepnope([';

        $i = 0;
        $count = count( $script_queue );

        // Loop through the queued scripts again, this time output the script loader syntax
        foreach( $script_queue as $handle ) {

            if ( 'jquery' === $handle ) {

                $jquery_cdn_url = ( is_ssl() ) ? 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' : 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';

                echo ' { load: "'. $jquery_cdn_url .'", callback: function () { if (!window.jQuery) { yepnope("' . $wp_scripts->base_url . $wp_scripts->registered['jquery']->src . '"); } } },';
            } else {

                $src = $wp_scripts->registered[$handle]->src;

                // Check if this is a relative path or if we have the whole thing
                if( 'http' !== strtolower( substr( $src, 0, 4 ) ) ) {

                    $src = $wp_scripts->base_url . $src;
                } else {

                    $src = ( is_ssl() ) ? 'https' . substr( $src, strpos( $src, ':' ), strlen( $src ) ) : 'http' . substr( $src, strpos( $src, ':' ), strlen( $src ) );
                }

                $comma = ( $i == ( $count - 1 ) ) ? '' : ',';

                echo '{ load: "' . $src . '" }' . $comma;
            }

            $i++;
        }       

        echo ']);</script>';
    }
}

// Instantiate the class
new example;
1
Dominic P

Voici le moyen facile d’ajouter des fichiers asynchrones à tous les fichiers js personnalisés dans WordPress.

Ajouter dans functions.php:

// Async load for all style
    function base_async_scripts($url)
    {
        if ( strpos( $url, '#asyncload') === false )
            return $url;
        else if ( is_admin() )
            return str_replace( '#asyncload', '', $url );
        else
        return str_replace( '#asyncload', '', $url )."' async='async"; 
        }
    add_filter( 'clean_url', 'base_async_scripts', 11, 1 );

//add or change in url as mentioned below
wp_enqueue_script( 'base-functions', get_template_directory_uri() . '/js/functions.js#asyncload', array( 'jquery' ), null, true );
0
user86710

Je viens de publier un plugin qui devrait être un dropin pour les installations wordpress. Encore très tôt et je suis sûr qu'il y aura des bugs, mais cela a fonctionné pour moi sur un site sur lequel je travaille:

http://wordpress.org/extend/plugins/asynchronous-javascript/

0
Paris Holley