adam
  • 0
Учитель

Асинхронные загрузчики Javascript

  • 0

Я хотел бы воспользоваться загрузкой своих скриптов во время загрузки страницы. т.е. Yepnope, head.js и т.д…

Но я также хочу иметь возможность ставить скрипт в очередь, чтобы другие плагины не пытались добавлять свои собственные. (а-ля jquery)

У кого-нибудь есть предложения?

Заранее спасибо…

Share
  1. У вас не может быть обоих: вы либо используете wp_enqueue_script(), либо head.js

    Или вы делаете какой-то дурацкий взлом, чтобы перевести дерево зависимостей скрипта WP в вызовы head.js.

    NB: замените head.js любой библиотекой, которую вы хотите использовать.

    • 0
  2. Это должен быть комментарий, но у меня пока нет таких привилегий.

    Но если основной задачей является предотвращение дублирования, отмените регистрацию сценария, затем зарегистрируйте тот же сценарий без источника и поставьте его в очередь. По сути, wp запустит пустой скрипт, чтобы заблокировать любую другую его версию регистрации/постановки в очередь.

    Затем добавьте скрипт с помощью метода по вашему выбору. Я не проводил тщательного тестирования, но получил совет откуда-то еще, и теоретически он должен работать нормально.

    • 0
  3. Вот что я делаю для этого. Я публикую это как возможное решение, а также для получения отзывов от тех, у кого больше опыта работы с WP, чем у меня. Если вы обнаружите какие-либо проблемы с моей реализацией или что-то, что я не рассматриваю, сообщите мне об этом.

    Известные ограничения:

    • Он работает только со сценариями, которые должным образом поставлены в очередь черезwp_enqueue_script
    • Он выводит все скрипты в нижний колонтитул, даже если они были зарегистрированы для вывода только в <head> разделе страницы. Это может быть легко обойти, но для моей реализации я предпочитаю именно такой способ.

    Проблема, которую я увидел с плагином head.js, заключалась в том, что он, казалось, работал только со сценариями в <head> разделе, и тот факт, что он не допускал каких-либо простых резервных функций CDN, что является действительно хорошим преимуществом загрузки скриптов таким образом в мое мнение.

    Хорошо, вот код. Это часть класса, который находится в моем плагине общей функциональности, но он может быть легко functions.php организован каким-либо другим способом. Сейчас я использую yepnope, но его можно легко изменить, чтобы использовать другой загрузчик скриптов.

    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;
    
    • 0
  4. Я только что выпустил плагин, который должен быть доступен для установки WordPress. Еще очень рано, и я уверен, что будут ошибки, но у меня это сработало на сайте, над которым я работаю:

    http://wordpress.org/extend/plugins/асинхронный-javascript/

    • 0
  5. Вот простой способ добавить асинхронность ко всем пользовательским файлам js в WordPress.

    Добавьте в 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

Оставить ответ

You must login to add an answer.