Автоматизированная подгрузка изображений в jQuery

Web приложения зачастую используют множество фоновых изображений, которые не видны при загрузке страницы. Во первых, это изображения, применяемые для “ролловер” эффектов, когда элементы меняют фон при наведении указателя мыши. Во вторых, это множество всевозможных динамических элементов, создаваемых JavaScript, а также содержимое получаемое при помощи AJAX. Проблема с этими элементами состоит в том, что при отрисовке таких элементов браузер начинает загружать фоновые изображения, что требует некоторого времени, а следовательно создает неприятный эффект мерцания и фрагментирования.

Для избавления от этих недостатков существует распространенный метод подгрузки изображений при помощи JavaScript, когда изображения для подгрузки добавляются в массив, а затем создаются новые объекты Image которые загружают изображения в кэш. Пример:

var imagesList = [
		'flower.jpg','tree.jpg','open.gif','close.gif',
		'folder.gif','minimize.gif','maximize.gif','exit.png'
];

var aImages = [];
for (var i = 0, len = imagesList.length; i < len; i++) {
	aImages[i] = new Image();
	aImages[i].src = imagesList[i];
}

Подробнее об этом примере смотрите здесь.

Как видите, здесь нужно самому добавлять изображения для загрузки в массив. Альтернативой этому методу может быть preloadCssImages.jQuery.js - плагин для jQuery, который автоматически парсит все таблицы стилей и подгружает все изображения, на которые они ссылаются:

/*
 * --------------------------------------------------------------------
 * 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 (c) 2008 Filament Group, Inc
 * Licensed under GPL (http://www.opensource.org/licenses/gpl-license.php)
 *
 * Version: 1.0, 31.05.2007
 * Changelog:
 * 	02.20.2008 initial Version 1.0
 * --------------------------------------------------------------------
 */
$.preloadCssImages = function(settings){
	//overrideable defaults
	settings = jQuery.extend({
		 imgDir: 'images'
	}, settings);

	//dump all the css rules into one string
	var sheets = document.styleSheets;
	var cssPile = '';
	for(var i = 0; i < sheets.length; i++){
		var thisSheetRules = document.styleSheets[ i ].cssRules;
		for(var j = 0; j < thisSheetRules.length; j++){
			cssPile+= thisSheetRules[ j ].cssText;
		}
	}
	//parse string for image urls and load them into the DOM
	var allImgs = [];//new array for all the image urls
	var imgUrls = cssPile.match(/[^\/]+\.(gif|jpg|jpeg|png)/g);//reg ex to get a string of between a "/" and a ".filename"
	if(imgUrls != null && imgUrls.length > 0 && imgUrls != ""){//loop array
		var arr = jQuery.makeArray(imgUrls);//create array from regex obj
		$(arr).each(function(k){
			allImgs[ k ] = new Image(); //new img obj
			allImgs[ k ].src = settings.imgDir +"/"+ this;
		});
	}
	return allImgs;
}

Для использования просто скопируйте и вставьте приложенное выше содержимое плагина в JavaScript файл. Затем используйте функцию preloadCssImages для подгрузки изображений, указывая при этом путь к папке с изображениями:

$.preloadCssImages({ imgDir: 'myImagesDirectory' });

В данный момент плагин может подгружать изображения только из одной директории, в будущем планируется добавить возможность работать с изображениями относительно расположения таблицы стилей.

Смотреть демо и загрузить плагин можно здесь.