Webpoint

Weblosofia com CSS, Jquery, Javascript, Ajax, PHP etc.

por Alexandre Magno

Home
Contato

Categorias

Arquivos

jQuery include plugin

Postado em Outubro 01st, 2008 por Alexandre Magno

A função de inserir arquivos Javascripts ou CSS sob demanda (através de um comando) deveria ser essencial no javascript. Existe alguns plugins para jQuery que faz isto como Javascript on demand, mas ainda faltava flexibilidade e a possibilidade de adicionar arquivos CSS.

Criei um plugin que insere no head do documento a tag script apontando para um script externo ou a tag link para um arquivo css. Você pode passar uma string como arquivo ou um array de arquivos para serem carregados. Ele não insere scripts duplicados, pois sempre verifica a existência do arquivo antes de inserir.

Sintaxe


$.include(String | Array url, Function callback);

Exemplos


//Javascript único
$.include('file.js');

//Você pode passar uma array de arquivos

$.include(['file01.js','file02.js']);

//Você pode especificar o diretório base para todos arquivos inclusos

$.ImportBasePath = '/foo/test/';

//Você pode inserir arquivos de diferentes formatos em um único array

$.include(['file01.js','file02.css']);

//O plugin suporta callback também
$.include(['file01.js',function(){
//code be executed when script loads
});

//Ainda não amplamento testado, você pode usar callbacks para scripts gerados

$.include(['file01.css',function(){
//code be executed when css loads
});

Utilidade

Ideal para inserir scripts sob demanda ou executar scripts e estilos em requisições Ajax

Por que não usar $.getScript?

O $.getScript é muito útil para carregar arquivos javascript, mas ele faz uma requisição ajax em que o retorno é avaliado e executado. O proposta deste plugin é criar um novo elemento no head do documento.

Compatibilidade

Firefox 2+
Internet Explorer 6+

Danilo comentou:

1st Outubro, 2008 às 6:14 pm

bem útil, parabéns.

Ferdinando comentou:

18th Novembro, 2008 às 6:52 pm

Antes de qualquer coisa, parabéns pelo site e pela dedicação.

Você comenta, sobre Por que não usar $.getScript?

Em incursões pelo google, acabei achando soluções para resolver o problema com o $.getScript, nos quais adotei em meu projeto e percebi realmente um certo aumento na performance.

utilize antes do $.getScript as instruções

$.ajaxSetup({async: false});
$.ajaxSetup({cache: true});

$.getScript(”seu ARQUIVO JS”);

$.ajaxSetup({async: true});
$.ajaxSetup({cache: false});

Esse procedimento não deixa o script ser carregado varias vezes e acompanhando na pasta temporaria, você vê que os scripts não são carregados novamente, toda vez que você acessa o site.

Pensando em desenvolvimento de sistemas robustos onde você tem dezenas de rotinas e procedimentos, não da pra carregar toda hora as .js.

Parabéns novamente e em breve se você me permitir, estarei disponibilizando um sistema para sua avaliação, que gera formularios completos, facilitando o desenvolvimento de sistemas completos em pouco tempo, claro 100% JQUERY.

Abraços

Alexandre Magno comentou:

21st Novembro, 2008 às 10:24 am

O plugin que criei não insere várias vezes, ele verifica antes de inserir se o plugin já existe. O problema com o código que você mostrou é que você está fazendo uma requisição ajax não assíncrona e dependendo do tamanho do script o browser ficará travado até completar a requisição.
Se desejar disponibilizar estarei a disposição. Abraços e boa sorte, se precisar estou aqui como sempre…

Manuel comentou:

6th Março, 2009 às 10:16 pm

Oi Alexandre

Procurava uma forma de inserir um script através do jquery e você me ajudou, obrigado.

Cumprimentos

Onde colocar a tag script? em Webpoint - Weblosofia com CSS, Jquery, Javascript, Ajax, PHP etc. comentou:

14th Março, 2009 às 3:30 pm

[…] a diferença de perfomance é considerável. Para tentar minimizar este problema, eu utilizo o carregamento de scripts sob demanda que desenvolvi para não carregar scripts desnecessários na página que muitas vezes nem use algum […]

Marcus Medeiros comentou:

16th Abril, 2009 às 3:13 pm

Quero agradecer ao Alexandre pelo site, muito bom, tiro várias dúvidas aqui. e também agradecer ao Ferdinando com o “$.getScript” acaba de salvar meu pescoço hehehe

Alexandre Magno comentou:

16th Abril, 2009 às 4:37 pm

@Marcus: Muito obrigado Marcus pelo reconhecimento. Abraços e boa sorte…

Alexandre Lopes comentou:

20th Agosto, 2009 às 5:19 pm

E chara dos baum esse heim…

Quando eu crescer que ser parecido com esse feio aew… o.O…

[ a parte do feio é brincadeira ]

Parabéns + uma vez pelo seu esforço…

Abraços

Alexandre Magno comentou:

20th Agosto, 2009 às 9:21 pm

@Muito obrigado chará, fico feliz que o plugin tenha sido útil, estou trabalhando em uma nova versão para ele… grande abraço….

Paulo Rafael comentou:

27th Outubro, 2009 às 3:19 pm

Cara, esse plugin é muito legal, consegui facilmente mudar o layout do meu site. o usuário é quem escolhe a cor, show mesmo.

Adriana comentou:

17th Maio, 2010 às 10:07 am

Em meu site atualizo uma div com o comando $(vdiv).load(vpagina,{acc:nocache}) do Jquery. Em algum momento o usuario pode clicar para ver uma galeria de imagens da empresa. Eu tentei usar seu plugin para apos o carregamento da pagina com o comando acima eu adicionasse a conf. da galeria, mas nao funcionou no IE. Onde eu errei?

$(’#dinamico’).load(’galeria.php’);
$.include(”./include/jgaleria.js”);

fonte da jgaleria.js e:

jQuery(’#galeria-thumbs’).jcarousel({
// vertical: true,
size:8, // num. de itens
scroll: 2
});

Os scripts do Jquery (1.4.2) e da jgaleria estao no index.php

Alexandre Magno comentou:

18th Maio, 2010 às 1:29 am

@Adriana: Olá, tente iniciar a galeria no callback do $.include. Espero que tenha ajudado e boa sorte.