Jump to content
Robson Augusto

Como transformar essa função em assíncrona

Recommended Posts

Boa noite galera, não tenho conhecimento em programação, o que desenvolvi em meu site atualmente foi através de pesquisas e curiosidade em aprender e modelar site por conta própria.

Hoje estou com um problema quanto a velocidade do site, muitas JS bloqueando a renderização do site, eu cheguei a tentar jogar todo JS para fim da página "footer", mas algumas páginas se desconfigurarão, então eu gostaria de pedir ajuda a vocês, sobre como eu deixo meu site mais rápido sem desconfigurar as páginas... Ou como adicionar o async dentro dessas funções!?

Segue o php de chamadas do css e js

 

<?php

class CaryAssets
{

    var $location;
    var $section;

    public function __construct()
    {
        $this->location = Rewrite::newInstance()->get_location();
        $this->section = Rewrite::newInstance()->get_section();

        osc_add_hook('header', array(&$this, 'enqueue_css'), 1);
        osc_add_hook('header', array(&$this, 'enqueue_js'));

    }


    function enqueue_css()
    {
        $location = Rewrite::newInstance()->get_location();
        $section = Rewrite::newInstance()->get_section();

        if ($location === 'user' && in_array($section, array('dashboard', 'profile', 'alerts', 'change_email', 'change_username', 'change_password', 'items'))) {
            $user = User::newInstance()->findByPrimaryKey(Session::newInstance()->_get('userId'));
            View::newInstance()->_exportVariableToView('user', $user);
            ?>
            <script type="text/javascript">
                var cary_theme = window.cary_theme || {};
                cary_theme.user = {};
                cary_theme.user.id = '<?php echo osc_user_id(); ?>';
                cary_theme.user.secret = '<?php echo osc_user_field("s_secret"); ?>';
            </script>
            <?php
        }
        // osc_enqueue_style('bootstrap', osc_current_web_theme_url() . 'lib/bootstrap/css/bootstrap.min.css');
        // customized bootstrap with 480px @media
        // https://gist.github.com/wdollar/135ec3c80faaf5a821b0
        osc_enqueue_style('bootstrap', osc_current_web_theme_url() . 'css/bootstrap.min.css');


        osc_enqueue_style('font-awesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css');
        osc_enqueue_style('bootstrap-social', osc_current_web_theme_url() . 'css/bootstrap-social.css');

        osc_enqueue_style('bxslider-css', osc_current_web_theme_url() . 'lib/bxslider/css/jquery.bxslider.min.css');
        osc_enqueue_style('sweetalert-css', osc_current_web_theme_url() . 'js/sweetalert-master/dist/sweetalert.css');
        osc_enqueue_style('style', osc_current_web_theme_url() . 'css/style.css');

        osc_enqueue_style('style-jquery-ui', osc_current_web_theme_url() . 'lib/jquery-ui/jquery-ui.css');
        osc_enqueue_style('style-animatedModal', '//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css');
        if(Params::getParam('page') === 'item' &&
            (Params::getParam('action')==='item_add' || Params::getParam('action')==='item_edit')) {
            osc_enqueue_style('style-jquery-ui', osc_current_web_theme_url() . 'js/alt-checkbox/jquery.alt-checkbox.css');
        }
    }

    function enqueue_js()
    {
        osc_register_script('jquery', osc_current_web_theme_url() . 'lib/jquery/js/jquery-1.12.0.min.js');
        osc_enqueue_script('jquery');
        osc_register_script('jquery-ui', osc_current_web_theme_url() . 'lib/jquery-ui/jquery-ui.js', 'jquery');
        osc_enqueue_script('jquery-ui');
        osc_enqueue_script('php-date');

        osc_register_script('animatedModal', osc_current_web_theme_url() . 'js/animatedModal.js-master/animatedModal.min.js', 'jquery');
        osc_enqueue_script('animatedModal');

        osc_register_script('global-js', osc_current_web_theme_url() . 'js/global.js', 'jquery');
        osc_enqueue_script('global-js');

        osc_register_script('sticky', osc_current_web_theme_url() . 'node_modules/sticky-kit/dist/sticky-kit.js', 'jquery');
        osc_enqueue_script('sticky');

        osc_register_script('bootstrap-js', osc_current_web_theme_url() . 'lib/bootstrap/js/bootstrap.min.js', 'jquery');
        osc_enqueue_script('bootstrap-js');

        osc_register_script('bxslider-js', osc_current_web_theme_url() . 'lib/bxslider/js/jquery.bxslider.min.js', 'jquery');
        osc_enqueue_script('bxslider-js');

        $url = 'https://maps.googleapis.com/maps/api/js?libraries=places';
        if (trim(osc_get_preference('maps_key', 'cary_theme')) != '') {
            $url = 'https://maps.googleapis.com/maps/api/js?key=' . trim(osc_get_preference('maps_key', 'cary_theme')) . '&libraries=places';
        }
        osc_register_script('gmaps-js', $url);

        osc_register_script('sweetalert-js', osc_current_web_theme_url() . 'js/sweetalert-master/dist/sweetalert.min.js');
        osc_enqueue_script('sweetalert-js');

        if (osc_is_ad_page() && osc_get_preference('include_maps_js', 'cary_theme')) {
            osc_enqueue_script('gmaps-js');
        }

        osc_register_script('delete-user-js', osc_current_web_theme_js_url('delete_user.js'), 'jquery-ui');

        if (($this->location === 'user' &&
                in_array($this->section, array('dashboard', 'profile', 'alerts', 'change_email', 'change_username', 'change_password', 'items')))
            || (Params::getParam('page') === 'custom' && Params::getParam('in_user_menu') == true)
        ) {
            osc_enqueue_script('delete-user-js');
        }
        if(Params::getParam('page') === 'item' &&
            (Params::getParam('action')==='item_add' || Params::getParam('action')==='item_edit')) {
            osc_register_script('alt-checkbox-js', osc_current_web_theme_url() . 'js/alt-checkbox/jquery.alt-checkbox.js');
            osc_enqueue_script('alt-checkbox-js');
        }
    }
}
 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By TheRonaldoStar
      Oi, mais cedo eu fiz um post aqui no site mas um pouco longo creio eu que e mais fácio eu fazer uma pergunta mais direta.
      A pergunta é:
      Como posso fazer agrupamentos de uma tabela através de dois campos cujo os valores são =, mesmo que esteja invertidos?
      EX: [DE = "1"], [PARA = "2"].
      E fazer o agrupamento ou só mostrar o ultimo cadastro mesmo que eles estejam invertidos desta forma?
      EX: [DE = "2"], [PARA = "1"].
       
      Acho que agora com este post fui mais claro, Alguém pode me ajudar por favor??.
      Atenciosamente,
      ~Ronaldo
    • By Vinicius Bazan
      Bom dia, Boa tarde e Boa noite!
       
        Estava eu aqui brincando um pouco com JS para entender um pouco melhor essa linguagem, pois eu preciso fazer um relógio em uma pagina HTML e um contador que aumente seu número em +1 de tempos em tempos ( no caso eu estava testando em aumentar a cada 5 segundos, considerando que esse número não vai começar do 0, pois ele teria que pegar todos os segundos que já se passaram nesse dia e dividir por 5, assim seu resultado inteiro seria exibido).
        O relógio com bastante esforço e pesquisa eu consegui fazer e está funcionando, até aqui sem dificuldades, o real problema está no contador, eu fui testar sem colocar um setInterval só para ver se o número aparece na tela e... NADA!
       Então como eu não manjo de JS e tentei fazer a partir do que eu usei pra fazer o relógio eu devo ter errado feio em muita coisa.
       
      <!DOCTYPE html> <html> <head> <title>javascript</title> <meta charset="utf-8"> <script type="text/javascript"> function relogio() { var data = new Date(); var horas = data.getHours(); var minutos = data.getMinutes(); var segundos = data.getSeconds(); if (horas < 10) { horas = "0"+horas; } if (minutos < 10) { segundos = "0"+minutos; } if (segundos < 10) { segundos = "0"+segundos; } document.getElementById("relogio").innerHTML=horas+":"+minutos+":"+segundos; } window.setInterval("relogio()",1000); // Aqui começa a função que eu tentei fazer para o contador function contador() { var data = new Date(); var horas = data.getHours(); var minutos = data.getMinutes(); var segundos = data.getSeconds(); var cont = ((minutos + (horas * 60))*60) + segundos ; document.getElementById("contador").innerHTML= Math.floor(cont/5); } </script> <style type="text/css"> #relogio { font:bold 28pt arial; display: block; margin: 100px auto; padding: 30px; background-color: #FFFF00; width: 150px; border-radius: 6px; box-shadow: 0px 0px 5px rgba(0, 0, 0, .5); } #contador { font:bold 28pt arial; display: block; margin: 100px auto; padding: 30px; background-color: #FFFF00; width: 150px; border-radius: 6px; box-shadow: 0px 0px 5px rgba(0, 0, 0, .5); } </style> </head> <body onload="relogio();"> <div id="relogio"> </div> <hr> <div id="contador"> </div> </body> </html>  
       Se alguém puder me ajudar eu agradeço!
    • By TheRonaldoStar
      Oii, fala ae pessoal!!
      Alguém pode me ajudar com uma coisa por favor?;
      Seguinte!, eu anteriormente fiz uma pergunta aqui no fórum recorrente a isso, mas eu conseguir uma solução parcial.
      Que era, fazer uma listagem de todos os cadastros e fazer a junção dos cadastros com uma coluna igual, Ou seja existem duas colunas [DE e Para], que recebem o id de quem está recebendo ou que está enviando a mensagem, eu conseguir fazer a tal listagem por grupo mas o problema que estou tendo é: que so faz o agrupamento de as colunas contiver o id por ex: [De = "1" e Para ="2"].
      Atualmente estou usando a codificação deste Jeito:
       
      $sql_2 = $db -> prepare("SELECT * FROM privado WHERE (Para = '$Meu_id') Or (De = '$Meu_id') GROUP BY Para, De DESC"); $sql_2 -> execute(); Esta consulta como pode ver ele busca todos os cadastros que tenha o meu ID ou seja do usuário online!, Após a consulta ele vei obter em um "while" somente o [ Id_De eo Id_Para ] desta forma:
      while($dados_2 = $sql_2 -> fetch(PDO::FETCH_OBJ)){ $Id_De = ($dados_2 -> De); $Id_Para = ($dados_2 -> Para); } Mas em fim eu gostaria de saber como mostrar somente um resultado ou seja o ultimo resultado que tiver o meu ID em ambas colunas [ Id_De ou Id_Para ].
      Antes de vocês me recomendar a função DESC LIMIT 'valor' saiba eu quero que liste todos os usuários que enviou ou recebeu minha mensagem não somente 1 ou seja se eu mandar um mensagem para o usuário 2 e ele me retornar uma mensagem vai mostrar somente o ultimo registro que tenha o meu ID e o id dele.
      Vou está enviando um anexo de como está o projeto atualmente para você ter uma ideia.
       
      Atenciosamente,
      ~Ronaldo

    • By egalauber
      Tenho o seguinte trecho de código:
       
      #anima {
              width:600px;
              height:300px;
              margin:auto;
              
              animation: banner 10s infinite;
          }
       
      @keyframes banner {
              0%, 33% {
                      background:#009;
                  }
              34%, 66% {
                      background:#C00;
                  }
              67%, 100% {
                      background:#390;
                  }
          }
       
      No HTML tenho uma div com id=anima.
      Esse código faz a cada 3 segundos mudar a cor dessa div, tipo como se fosse um slide show.
       
      O que eu preciso fazer, é colocar 3 botões, cada botão mudando pra uma cor. Cada botão mudando pra um pedaço da execução do @keyframes banner.
       
      Botão1 - pula para-> 0%, 33% { background:#009; }
      Botão2 - pula para-> 34%, 66% { background:#C00; }
      Botão3 - pula para-> 67%, 100% { background:#390; }
       
      Como?
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.