JavaScript - тормозят счётчики

Тема в разделе "Другие языки", создана пользователем o_nix, 25 фев 2011.

Модераторы: Цукер
  1. o_nix

    o_nix

    Регистр.:
    7 ноя 2007
    Сообщения:
    1.073
    Симпатии:
    1.037
    В общем вопрос простой
    Возможно ли асинхронное исполнение js на странице ??


    тоесть мне нужно расставить приоритеты js скриптам
    чтобы одни исполнялись прежде других не дожидаясь исполнения других скриптов

    js счётчики при проблемах на серверах статистики очень сильно тормозят загрузку страницы до 100% а нужный мне js исполняется по событию страница загружена.

    Можноли как то полностью подгрузить страницу чтобы исполнялся этот код а только потом грузить счётчики ??

    Есть очучение что нельзя, пока все скрипты не подгрузятся и не исполнятся страница будет считаться не загруженой.
     
  2. polyetilen

    polyetilen Заблокирован

    Регистр.:
    10 авг 2006
    Сообщения:
    814
    Симпатии:
    474
    Да можно динамически управлять когда загружать, когда исполнять. Когда нужно загрузить, то нужный файл цепляется в head, а когда файл загрузится запускается нужная функция. Пример загрузки jQuery
    HTML:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>dynamic js loading</title>
    
    <script type="text/javascript">
    //динамическая загрузка js
    function include_js(path_js, callback){
        var script = document.createElement("script");
        script.src = path_js;
        script.type = "text/javascript";
        document.getElementsByTagName("head")[0].appendChild(script);
        
        if(callback){
            // Firefox
            script.onload = function() {
                eval(callback + "();");
            }
            
            // IE
            script.onreadystatechange = function() {
                if (/loaded|complete/.test(this.readyState)) {
                  eval(callback + "();");
                }
            }
        }
    }
    
    
    
    //первая функция
    function main(){
        alert("страница загружена");
        //подключаем дополнительный файл и после его загрузки запускаем функцию jquery() если надо
        include_js("https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js", "jquery");
    }
    
    //запускается после загрузки файла
    function jquery() {
        $(document).ready(function(){
            $("body").text("jQuery библиотека загружена");
        });
    }
    
    main();
    
    </script>
    
    
    </head>
    
    <body>
    </body>
    </html>
    
    
    для теста можно загружать php файл
    PHP:
    sleep(5);
     
    o_nix нравится это.
  3. o_nix

    o_nix

    Регистр.:
    7 ноя 2007
    Сообщения:
    1.073
    Симпатии:
    1.037
    Не так работает

    вот код с текстом в body
    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=win-1251" />
    <title>dynamic js loading</title>
    <script type="text/javascript">
    //динамическая загрузка js
    function include_js(path_js, callback){
        var script = document.createElement("script");
        script.src = path_js;
        script.type = "text/javascript";
        document.getElementsByTagName("head")[0].appendChild(script);
        if(callback){
            // Firefox
            script.onload = function() {
                eval(callback + "();");
            }
            // IE
            script.onreadystatechange = function() {
                if (/loaded|complete/.test(this.readyState)) {
                  eval(callback + "();");
                }
            }
        }
    }
    //первая функция
    function main(){
        alert("страница загружена");
        //подключаем дополнительный файл и после его загрузки запускаем функцию stat() если надо
        include_js("https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js", "jquery");
    }
    //запускается после загрузки файла
    function jquery() {
        $("body").text("jQuery библиотека загружена");
    }
    main();
    </script>
    </head>
    <body>
    тут простио текст <br>с которым работает js<br> который должен быть запущен исполнен до подгрузки кода счётчиков, тизеров и прочего хлама. 
    </body>
    </html>
    Запускаю страницу - вижу alert страница загружена НО текста body не видно
    тоесть еслти я на этом этапе запущу свой скрипт он мне скажет что искомое отсутствует.

    Мне необходимо отобразить весь body, затем обработать его js и только потом запустить подгрузку всех второстепенных тяжёлых скриптов

    Или как вариант если такое есть в js запускать функцию обработки данных не по событию window.onload а по некоему событию "такойто блок или класс отображён на странице"
    и опятьтаки чтобы всё это исполнилось до всего остального хлама.
    то есть с дополнительным условием если мой первый js выполнился тогда далее грузим всё остальное.

    Добавлено через 16 минут
    ой всё нормально просто переместил вызов функции в отдельный js в нужное место html :) Пока в боевых условиях не тестил но вроде должно работать
    СПАСИБО :)

    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=win-1251" />
    <title>dynamic js loading</title>
    <script type="text/javascript">
    //динамическая загрузка js
    function include_js(path_js, callback){
        var script = document.createElement("script");
        script.src = path_js;
        script.type = "text/javascript";
        document.getElementsByTagName("head")[0].appendChild(script);
        if(callback){
            // Firefox
            script.onload = function() {
                eval(callback + "();");
            }
            // IE
            script.onreadystatechange = function() {
                if (/loaded|complete/.test(this.readyState)) {
                  eval(callback + "();");
                }
            }
        }
    }
    //первая функция
    function main(){
        alert("страница загружена");
        //подключаем дополнительный файл и после его загрузки запускаем функцию stat() если надо
        include_js("https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js", "jquery");
    }
    //запускается после загрузки файла
    function jquery() {
        $("body").text("jQuery библиотека загружена");
    }
    
    </script>
    </head>
    <body>
    <div>тут простио текст <br>с которым работает js<br> который должен быть запущен исполнен до подгрузки кода счётчиков, тизеров и прочего хлама. <script type="text/javascript">
    main();
    </script></div>
    
    <div>тут простио текст <br>с которым работает js<br> который должен быть запущен исполнен до подгрузки кода счётчиков, тизеров и прочего хлама. </div>
    </body>
    </html>
     
  4. polyetilen

    polyetilen Заблокирован

    Регистр.:
    10 авг 2006
    Сообщения:
    814
    Симпатии:
    474
    наверное не работал потому что jquery не успел инизиализироваться, забыл добавить $(document).ready(function(){ });
    исправил.