1. java
  2. android
  3. c#
  4. .net
  5. javascript
  6. php
  7. jquery
  8. html
  9. sql

Função load() JQuery lenta

Bom dia, estou usando a função load() para carregar uma pagina em div, porem fica um pouco lento para carregar quando alguém acessa o site pela rede, alguém sabe alguma forma de melhorar o desempenho(Caso eu não utilize o JQuery a execução é rápida, em media uns 2 segundos para carregar)? segue o código:

$(".sub").click(function(event) {
                    event.preventDefault(); 
                    $("#conteudo").load($(this).find('a').attr('href'))
                });

Na página seguinte ele carrega uma dataTable.

Pagina que chama o .sub





<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>W2 PLUGIN</title>
        <style type="text/css" rel="stylesheet"> 
            @import url("recursos/menu/menu.css"); 
        </style>
        <script type="text/javascript" src="/W2Plugin/js/jquery.js"></script>
        <script type="text/javascript" src="/W2Plugin/js/menu.js"></script>
        <script type="text/javascript" language="javascript" src="js/restrito.js"></script>
</head>
<body>
    <style type="text/css">
        * { margin:0;
            padding:0;
        }
        body { background:rgb(74,81,85); }
        div#menu { margin:5px auto; }
        div#copyright {
            font:11px 'Trebuchet MS';
            color:#222;
            text-indent:30px;
            padding:40px 0 0 0;
        }
        div#copyright a { color:#000; }
        div#copyright a:hover { color:#222; }
    </style>
    <div id="menu">
        <ul class="menu">

                <li><a href="#" class="parent"><span>Minha conta</span></a>
                    <ul>

                            <li><a href="#" class="parent"><span>Teste</span></a>
                                <ul>

                                        <li class="sub"><a href="/W2Plugin/documentos/1/874/894" ><span>Teste</span></a></li>

                                </ul>

                            <li><a href="#" class="parent"><span>dasd</span></a>
                                <ul>

                                        <li class="sub"><a href="/W2Plugin/documentos/1/876/896" ><span>dasd</span></a></li>

                                </ul>

                    </ul>
                </li>

                <li><a href="#" class="parent"><span>EDW</span></a>
                    <ul>

                            <li><a href="#" class="parent"><span>Teste</span></a>
                                <ul>

                                        <li class="sub"><a href="/W2Plugin/documentos/2/875/895" ><span>Teste</span></a></li>

                                </ul>

                    </ul>
                </li>

            <li class="sub"><a href="/W2Plugin/lixeira/24"><span>Lixeira</span></a></li>
            <li class="campos"><a href="/W2Plugin/campos"><span>Campos</span></a></li>
            <li class="configuracoes"><a href="/W2Plugin/configuracoes/24"><span>Configurações</span></a></li>
            <li class="parent"><a><span>Bem vindo: Process</span></a></li>
            <li class="last"><a href="/W2Plugin/logout"><span>Logout</span></a></li>
        </ul>
    </div> 
    <div id="conteudo" style="width: 75%; ">

    </div> 
</body>
</html>

A pagina não tem css praticamente ainda.

Segue o que carrega no conteudo.






<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Documentos</title>
        <style type="text/css" title="currentStyle">
            @import "recursos/css/tabelas/demo_page.css";
            @import "recursos/css/tabelas/demo_table.css";
        </style>
        <script type="text/javascript" language="javascript" src="js/tabelas/jquery.js"></script>
        <script type="text/javascript" language="javascript" src="js/tabelas/jquery.dataTables.js"></script>
        <script type="text/javascript" language="javascript" src="js/documentos.js"></script>
    </head>
    <body>
        <div class="documentos">
        <table cellpadding="0" cellspacing="0" border="0" class="display" id="tabela" width="100%" >
            <thead>
                <tr>
                    <th>Nome</th>
                    <th>Observação</th>
                    <th>Data de Criação</th>
                    <th>Formato</th>
                    <th>Download</th>
                    <th>Excluir</th>
                </tr>
            </thead>
            <tbody>

                    <tr>
                        <td>Documento1</td>
                        <td></td>
                        <td>10-02-2014 21:13:08</td>
                        <td>WORD</td>
                        <td><a href="/W2Plugin/download/303" target="_blank">Download</a></td>
                        <td class="exclusao"><a href="/W2Plugin/exclusao/303">Excluir</a></td>
                    </tr>

                    <tr>
                        <td>Documento1</td>
                        <td></td>
                        <td>10-02-2014 21:13:07</td>
                        <td>WORD</td>
                        <td><a href="/W2Plugin/download/302" target="_blank">Download</a></td>
                        <td class="exclusao"><a href="/W2Plugin/exclusao/302">Excluir</a></td>
                    </tr>

                    <tr>
                        <td>.jpg</td>
                        <td></td>
                        <td>05-03-2014 16:11:20</td>
                        <td>.jpg</td>
                        <td><a href="/W2Plugin/download/313" target="_blank">Download</a></td>
                        <td class="exclusao"><a href="/W2Plugin/exclusao/313">Excluir</a></td>
                    </tr>

                    <tr>
                        <td>asas</td>
                        <td></td>
                        <td>05-03-2014 16:39:43</td>
                        <td>.JPG</td>
                        <td><a href="/W2Plugin/download/314" target="_blank">Download</a></td>
                        <td class="exclusao"><a href="/W2Plugin/exclusao/314">Excluir</a></td>
                    </tr>

                    <tr>
                        <td>oficio circular 22-2014</td>
                        <td></td>
                        <td>05-03-2014 16:49:21</td>
                        <td>.pdf</td>
                        <td><a href="/W2Plugin/download/315" target="_blank">Download</a></td>
                        <td class="exclusao"><a href="/W2Plugin/exclusao/315">Excluir</a></td>
                    </tr>

                    <tr>
                        <td>oficio circular 22-2014</td>
                        <td></td>
                        <td>05-03-2014 17:23:39</td>
                        <td>.pdf</td>
                        <td><a href="/W2Plugin/download/319" target="_blank">Download</a></td>
                        <td class="exclusao"><a href="/W2Plugin/exclusao/319">Excluir</a></td>
                    </tr>

                    <tr>
                        <td>oficio circular 22-2014</td>
                        <td></td>
                        <td>05-03-2014 17:42:42</td>
                        <td>.pdf</td>
                        <td><a href="/W2Plugin/download/320" target="_blank">Download</a></td>
                        <td class="exclusao"><a href="/W2Plugin/exclusao/320">Excluir</a></td>
                    </tr>

            </tbody>
        </table>
        <form action="/W2Plugin/upload/documento"
              method="POST" enctype="multipart/form-data">
              <fieldset>
                <legend>Upload de Documento</legend>
                <input type="file" name="documento" />
                <input type="text" name="observacao" />
                <input type="hidden" name="areaAtual" value="1" />
                <input type="hidden" name="grupoAtual" value="874" />
                <input type="hidden" name="subAtual" value="894" /> 
                <button type="submit">Enviar</button>
            </fieldset>
        </form>
        </div>
    </body>
</html>

Alterei conforme o Guilherme me informou porem não carrega o css e o js segue a head e a função

 <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>W2 PLUGIN</title>
        <style type="text/css" rel="stylesheet"> 
            @import url("recursos/menu/menu.css");
        </style>
        <style type="text/css" title="currentStyle">
            @import "recursos/css/tabelas/demo_page.css";
            @import "recursos/css/tabelas/demo_table.css";
        </style>
        <script type="text/javascript" language="javascript" src="js/tabelas/jquery.dataTables.js"></script>
        <script type="text/javascript" language="javascript" src="js/documentos.js"></script>
        <script type="text/javascript" src="/W2Plugin/js/jquery.js"></script>
        <script type="text/javascript" src="/W2Plugin/js/menu.js"></script>
        <script type="text/javascript" language="javascript" src="js/restrito.js"></script>
</head>
$(".sub").click(function(event) {

        event.preventDefault(); 
        $("#conteudo").load($(this).find('a').attr('href')+"#tabelaDocs");
    });
  • Ola @Junior Miranda, pode postar a página que é carregada pelo $.load do Jquery?

    Mickdark   05 de mar de 2014
  • Poste o código HTML completo gerado pelo "View source" do browser das duas páginas antes de clicar no elemento com a classe .sub. Não é o código JSP original que produz o HTML, é o resultado mesmo.

    Guilherme Brügger   05 de mar de 2014
  1. Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
  2. Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
  3. Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
  4. Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
  5. Clique aqui para mais detalhes sobre o funcionamento do GUJ!

1 resposta

Não é a resposta que estava procurando? Procure outras perguntas com as tags jquery java-ee div jsp ou faça a sua própria pergunta.