Carregar arquivo javascript dinamicamente

On 22 de março de 2012, in JavaScript, by andersonstraube

Muitas vezes precisamos carregar arquivos javascript dinamicamente (sob demanda) para uma melhor performance do front-end pois normalmente só utilizamos aquele arquivo em uma determinada situação, se o usuário clicar em um botão específico, etc.. Quando isso é feito precisamos ter um controle de quando esse arquivo foi carregado e já está pronto para ser usado.

Neste exemplo nós iremos carregar a lib jQuery dinamicamente. O código está auto-explicativo:


var jQueryLib = document.createElement("script");
jQueryLib.type = "text/javascript";
jQueryLib.src  = "/lib/jquery-1.7.1.min.js";

// quando terminar de carregar o arquivo ele já está pronto para ser usado
function callbackCarregar() {
	$j = jQuery.noConflict();
}

// Verifica se é um browser de verdade que suporta listeners (FF, Chrome, Safari, Opera) 
if ( typeof(jQueryLib.addEventListener) != 'undefined') {
	jQueryLib.addEventListener('load',callbackCarregar,false);
} else {
	// (IE 8+ ) Você achou mesmo que iria funcionar de boa no IE sem códigos extras?! 
	function handleIeState() {
		if(jQueryLib.readyState == 'loaded'){
			callbackCarregar();
		}
	}
	var ret = jQueryLib.attachEvent('onreadystatechange', handleIeState);
}

// adicionamos nosso script no cabeçalho do documento
document.getElementsByTagName("head")[0].appendChild(jQueryLib);

Até a próxima.

Tagged with:  

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *