Preload de imagens do CSS

2008-06-20 Wender Lima Dicas

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/

Share

CSS,

6 Responses to “Preload de imagens do CSS”


Deixe um Comentário

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Powered by WordPress. Designed by elogi.

Switch to our mobile site