Preload de imagens do CSS
O Scott Jehl, fez um plugin pra jQuery que resolve um problema chato na maioria dos layouts tableless que usam os recursos de “hover” para trocar imagens, este plugin faz uma varredura nos arquivos CSS embedados na página, e busca dentro deles todas as referencias de imagens e faz o pré-carregamento delas, assim, quando o usuário passa o mouse sobre algum item do menu(por exemplo) a imagem da ação “hover” do CSS é exibida imediatamente.
É mais uma das coisas que eu penso… “Como não pensei nisso antes?”
Na verdade, esta é uma versão mais atual de um script que ele ja havia escrito, mas o anterior carregava somente as imagens de um único diretório, o que impedia que o script carregasse as imagens de outros diretórios ou até mesmo de outros sites, mas esta atualização permite fazer o preload das imagens, não importando onde elas estejam.
Este é o código do plugin:
http://www.ajaxianos.com.br/arquivos/preloadCssImages.jQuery_v2.js
/**
* --------------------------------------------------------------------
* jQuery-Plugin "preloadCssImages"
* by Scott Jehl, scott@filamentgroup.com
* http://www.filamentgroup.com
* reference article: http://www.filamentgroup.com/lab/automated_image_preloading/
* demo page: http://www.filamentgroup.com/examples/preloadImages/
*
* Copyright ©2008 Filament Group, Inc
* Dual licensed under the MIT (filamentgroup.com/examples/mit-license.txt) and GPL (filamentgroup.com/examples/gpl-license.txt) licenses.
*
* Version: 2.0, 06.04.2008
* Changelog:
* 02.20.2008 initial Version 1.0
* 06.04.2008 Version 2.0 : removed need for any passed arguments. Images load from any and all directories.
* --------------------------------------------------------------------
*/
jQuery.preloadCssImages = function(){
var allImgs = [];//new array for all the image urls
var k = 0; //iterator for adding images
var sheets = document.styleSheets;//array of stylesheets
for(var i = 0; i0 && imgUrls != ''){//loop array
var arr = jQuery.makeArray(imgUrls);//create array from regex obj
jQuery(arr).each(function(){
allImgs[ k ] = new Image(); //new img obj
allImgs[ k ].src = (this[0] == '/' || this.match('http://')) ? this : baseURL + this; //set src either absolute or rel to css dir
k++;
});
}
}//loop
return allImgs;
}
Para usar, além de ter a Lib jQuery na sua página(óbvio), basta rodar este comando:
$.preloadCssImages();
Eu particularmente executaria depois que a página estivesse inteiramente carregada, usando a função “ready” do jQuery:
$(document).ready(function(){$.preloadCssImages();});
Na página do Scott você pode ver um exemplo dessa belezinha funcionando
http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/
Se você gostou deste post, escreva um comentário e/ou cadastre-se em nosso feed.
Comentários
Uma técnica bem interessante é criar 1 imagem só para os 2 estados: “normal e hover”.
Vamos suporte que o height do botão seja 20px, então minha imagem deve ter 40px, aí no css é só utilizar o position:
#botao a:hover { background-position: 0px -20px; }
Isso evita ter que baixar mais um arquivo de imagem somente para o hover e também melhora a performance, uma vez que terá uma requisição apenas e não mais 2 para no caso do hover.
Valeu,
Anderson
Muito bom o script. Porém eu me ferrei com ele. =)
No meu caso, a img do hover era um gif animado de 800k. O script tirou o movimento dele. =/
Não é mais fácil criar uma imagem com o estado normal e hover e no css mudar apenas o “position”? Dessa forma não precisa carregar imagem externa, ele apenas muda o fundoe não precisa usar nada de biblioteca js.