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

[sourcecode language=”javascript”]
$.include(String | Array url, Function callback);
[/sourcecode]

Exemplos

[sourcecode language=”javascript”]
//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
});
[/sourcecode]

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+

Download

http://plugins.jquery.com/project/includedemand

Código fonte

http://code.google.com/p/jquerydevbrazil/source/browse/trunk/jquery.include.js

By Plugins14 comentários em jQuery include plugin

14 Replies to “jQuery include plugin”

  2. 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

    Responder

  3. 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…

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

  6. 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

    Responder

  11. 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

    Responder

  13. Eu nao entendi a estrutura:
    – Primeiro carrego a pagina (com o load)
    – Depois chamo o include carregando o que? Ja que o jgaleria.js e a inicializacao da galeria?

    Responder

Deixe um comentário

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