[Programação]: Carregando Javascript/CSS dinamicamente com jQuery

Sempre me deparo com as seguintes situação: tenho que carregar bibliotecas (como tinyMCE) em gestores de conteúdo, mas o tamanho da biblioteca é muito grande (sem Gzip) ou tenho que carregar um CSS para impressão de uma página, mas o somente a parte do conteúdo é dinâmica, cabeçalho/rodapé são dinâmicos.

Vou carregar coisas desncessárias em páginas que não preciso? Lógico que não né. :B

Pensando um pouco cheguei a conclusão: posso “injetar” na header do documento quando atingir as páginas que preciso, veja o código abaixo, utilizando jQuery:

function loadScript(src) {
$('head').append(
$(document.createElement('script'))
.attr({
type: 'text/javascript',
src: src + "?_" + parseInt((Math.random()*1000000))
})
)
}
function loadCSS: function(src, media_css) {
$('head').append(
$(document.createElement('link'))
.attr({
rel: 'stylesheet',
type: 'text/css',
media: media_css || 'screen,projection',
href: _HTTP_PATH_ + src + "?_" + parseInt((Math.random()*1000000))
})
)
}

Onde eu quero carregar dinamicamente um CSS, eu simplesmente faço isto:

<script type="text/javascript">loadCSS("css/impressao_pagina.css", "print");

Geralmente adiciono isto no próprio html mesmo (que será carregado quando o documento terminar o seu “loading”) ou via a função ready() do jQuery.

Isto seria uma forma de Lazy Loading de pobre, mas na essência do conceito, não deixa de ser.

Rápido e indolor