Não sei vocês, mas no meu caso, a maioria do tráfego do meu site vem “redes sociais” de blogs, como o tecnocrati, linkk, rec6, linkTo, stumbleUpon, etc… E manter os widgets desses caras sempre é útil! Quem vai votar no meu site depois de ter fechado a página original com o link? Acho que ninguém se daria esse trabalho.
Só tem um porém: Esses widgets são pedaços de javascript externo, que carregam arquivos e imagens do site de origem, e nem sempre carregam numa velocidade razoável. Resultado? Meu blog demorava milênios pra carregar.
Mas seus problemas se acabaram-se (ou quase).
Com o javascript delayator tabajara você agora já pode forçar os widgets a carregar apenas DEPOIS QUE TUDO já foi carregado :). E não se assuste, mas é uma gambiarra faminta! 🙂
Uso de iFrame
O primeiro passo pra isso é usar iFrame. Com um iFrame eu posso carregar um conteúdo qualquer num espaço separo que não vai impactar a carga do resto do meu site. Basicamente eu uso um iFrame inicialmente só pra reservar o espaço, e uso javascript para carregar o conteúdo. Um iframe fica mais ou menos assim:
<iframe src=""></iframe>
Que é um iFrame vazio. Depois a gente usa um javascriptzinho pra “encher” o cara. E é aí que vem a manha: O campo de “src” do iFrame pode ser preenchido com código javascript! Você pode gerar uma página inteira usando javascript e carregar ela no iframe, olha só:
<iframe id="myFrame" src="javascript:'XXXX'"></iframe>
E depois usar um script como o seguinte para preencher o iFrame:
<script language="JavaScript">
function getConteudo() {
return "<h1>TESTE</h1>";
}
var frame = document.getElementById('myFrame');
frame.src = "javascript:'" + getConteudo() + "'";
</script>
Onde “getConteudo()” pode ser reescrita para retornar o que você bem entender. Claro que por enquanto não evitamos que a iFrame tenha o conteúdo carregado no momento em que o script for lido, e com isso só “adiamos” por algumas linhas a carga do nosso widget. O pulo do gato e forçar o javascript a só rodar DEPOIS do final da carga da página. Como? Simples, usando a propriedade de “onload” do HTML:
<head>
<script language="JavaScript">
function getConteudo() {
return "<h1>TESTE</h1>";
}
function carregaiFrame() {
var frame = document.getElementById('myFrame');
frame.src = "javascript:'" + getConteudo() + "'";
}
</script>
<body onload="carregaiFrame()">
<iframe id="myFrame" src="javascript:'XXXX'"></iframe>
</body>
Agora sim! Nosso iFrame carrega o conteúdo que a gente quer, só depois que a página carregar. Mas ainda falta um problema…
“Mas, tio, desse jeito eu só tenho direito a um único iFrame?”
E é aí que vem o pulo do gato! Javascript é seu amigo, ele vai te ajudar. Se eu usar o javascript pra “guardar” o nome e o conteúdo de todos os frames numa lista, depois da página carregada eu só preciso percorrer a lista de iFrames e preencher cada um com o valor correto. Pra isso, precisamos de um scriptzinho logo abaixo de cada iFrame, só pra “contar” o que vai ser o conteúdo dele:
<iframe id="frame1" src="javascript:'XXXX'"></iframe>
<script>
frame_contents['frame1'] = '<script>document.write("teste1");</script>';
</script>
Vejam que pra ilustrar melhor eu usei um script javascript no exemplo. E vejam um detalhe importante: dentro da variável eu usei </script> ao invés de apenas </script>. Se não fizer isso, o browser fica doidão porque acha que você fechou o seu script antes da hora. Aí não…
Enfim, esse código sozinho não faz nada. A gente precisa agora “chamar” esse cara no nosso onLoad… Pra isso, vamos modificar o método carregaiFrame() pra dizer:
// nosso vetor precisa ser declarado, já que ele vai ser usado mais tarde:
var frame_contents = {};
function carregaiFrame() {
for (name in frame_contents) {
frame = document.getElementById(name);
var src_value = "javascript:'" + frame_contents[name] + "'";
frame.src = src_value;
}
}
Tcharam! Temos um lindo código que carrega minhas iFrames somente APÓS a carga de toda a página, assim os elementos “lentos” podem ser todos carregados em iFrames desse tipo.
Problemas pendentes
Claro que nem tudo são flores… Sempre sobram um ou outro probleminha pendentes. No meu caso, o problema ficou por conta do rec6. Enquanto os outros widgets usam um link que abre em uma nova janela, o widget do rec6 tem um link normal, que abre na mesma janela. Assim, a página de login ou de votação abre pro sujeito dentro de um iFrame com tamanho pra caber apenas o widget. Impossível de usar, não é? Mas eu estou batalhando numa solução. Quem sabe um jeito de copiar o conteúdo do iFrame pra dentro de um div. Ainda tenho de testar o que vai dar certo.
Nesse meio tempo, deixo vocês brincarem com as dicas que acabei de dar. E lembrem-se: no Internet Explorer, pra tirar as bordas de um iFrame, não adianta usar CSS… (Mas essa dica quem for esperto pega direto do código fonte dessa página).
Pra quem não gostava do termo Web 2.0 @ wikipedia.org (en) pra descrever o que é a nova onda de aplicações sociais na internet, o que dirá desse artigo da Scientific American: Science 2.0 — Is Open Access Science the Future?