Neste artigo será exemplificada a utilização do método jQuery.Load, uma funcionalidade bacana da jQuery que nos permite carregar páginas ou trechos delas em outra página e em momentos distintos ao carregamento da página principal.
Isso abre margem para desenvolver páginas mais leves e distribuídas, não mantendo o navegador do cliente travado enquanto todo a página é carregada, tornando assim um carregamento modular.
Para este artigo vamos precisar de poucas coisas:
- jQuery;
- HTML;
- ASP.net.
Crie um projeto web forms e abra a aba source da página ASP.net.
Primeiramente vamos registrar na página a nossa biblioteca jQuery, como exemplificado abaixo:
Listagem 1: Carregando a jQuery
<head runat="server">
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
Após essa linha já temos a possibilidade de iniciar o trabalho com a jQuery.
Antes de iniciar vamos estilizar a tela inicial onde o jQuery.Load será utilizado. Vamos criar quatro retângulos na tela, assim facilitando a visualização e entendimento.
A tela terá o aspecto idêntico a figura abaixo.
Figura 1: O aspecto da tela
Listagem 2: Html Principal
<body>
<form id="form1" runat="server">
<div style="width: 100%;">
<div style="float: left; width: 50%; height: 200px" id="div1">(1)</div>
<div style="float: left; width: 50%; height: 200px" id="div2">(2)</div>
<div style="clear: both"></div>
<div style="float: left; width: 50%; height: 200px" id="div3">(3)</div>
<div style="float: left; width: 50%; height: 200px" id="div4">(4)</div>
</div>
</form>
</body>
Em cada quadrante vamos preencher com informações distintas e explanar melhor a utilização do jQuery.Load.
Quadrante 1
Neste quadrante vamos carregar a página principal do portal DevMedia.
Não serão levadas em consideração semântica ou boas práticas nesses exemplos, de forma que tenhamos o artigo com foco na funcionalidade do método Load.
Para carregar o site da DevMedia, vamos gerar um HTML e nele inserir um iframe, que irá se encarregar de ter todo o site carregado. Iremos chamar essa página via jQuery.Load, conforme a exemplificação a seguir:
Listagem 3: HTML DevMedia Iframe
<div>
<iframe src="//www.devmedia.com.br" height="200px" width="100%"></iframe>
</div>
Rapidamente, vamos à página dos quadrantes e chamar o jQuery.Load.
Listagem 4: jQuery.Load para o primeiro quadrante
<script>
$(function () {
$("#div1").load('devMediaIframe.html', sucessCallBack);
});
function sucessCallBack(a) { }
</script>
Note que foi feita a chamada da página que contém o iframe que irá chamar a página da DevMedia.
O ganho ao utilizar o Load é que a página principal do site não fica esperando todo o processo de carregamento das outras páginas, cada uma tem seu tempo de espera e o site pode ser visualizado parcialmente por aqueles que possuem menor velocidade de conexão, por exemplo.
O resultado é o seguinte:
Figura 2: Site da DevMedia no Quadrante 1
Tranquilo, o trabalho para incluir as demais informações nos próximos quadrantes seguirá a mesma rotina. Crie a página HTML, ASPX ou a gosto e informe o caminho relativo da mesma para o jQuery.Load. Repita esse processo para cada um dos quadrantes.
Containers
O jQuery.Load possibilita receber um container, que é uma espécie de âncora onde iremos informar qual dos containers desejamos que apareça no quadrante. Isso possibilita que geremos containers dentro de uma única página que queremos carregar no jQuery.Load.
Para tal, voltamos na página do iframe da DevMedia e criamos um container, para isso, devemos apenas definir um ID para a div ou objeto HTML em questão.
Listagem 5: Criando Containers
<div id="Column1">
<iframe src="//www.devmedia.com.br" height="200px" width="100%"></iframe>
</div>
<div id="Column2">
<iframe src="http://www.terra.com.br" height="200px" width="100%"></iframe>
</div>
<div id="Column3">
<iframe src="http://www.speedtest.net" height="200px" width="100%"></iframe> </div>
<div id="Column4">
<iframe src="http://www.uol.com.br" height="200px" width="100%"></iframe> </div>
Note que cada div possui um ID, cada div dessa é um container de informação.
Agora no jQuery.Load vamos declarar os quadrantes e, para cada quadrante, vamos chamar a mesma página, porém indicando que queremos as informações de containers distintos.
O código ficará assim:
Listagem 6: Código jQuery.Load com containers
$(function () {
$("#div1").load('devMediaIframe.html #Column1', sucessCallBack);
$("#div2").load('devMediaIframe.html #Column2');
$("#div3").load('devMediaIframe.html #Column3');
$("#div4").load('devMediaIframe.html #Column4');
});
function sucessCallBack(a) { }
Simples assim, cada # à frente do nome da página significa que almejamos carregar a página HTML, porém as informações que queremos que sejam apresentadas, são apenas as que estão dentro do container. Assim é possível enxugar um pouco o trabalho e centralizar a página que conterá algumas informações ou serviços que desejamos carregar no nosso site ou sistema corporativo.
Existe também a possibilidade de enviar parâmetros para a página, caso a mesma necessite, simulando a situação de um post.
Então o jQuery.Load é uma funcionalidade que deve ser explorada e utilizada em alguns pontos do seu site pois fragmenta o carregamento da página.
Muitas outras possibilidades são possíveis conhecendo esta função.
Obrigado.
