Предзагрузка изображений - jquery preloader (без плагина)

Часто встает необходимость предзагрузки изображений. Я нашел в интернете интересный метод предзагрузки изображений, и немного дописал его, чтобы можно было удобно управлять тем, откуда грузить картинки.

Как пользоваться предзагрузкой картинок?

1. Вставляем этот код внутрь тега <head></head> на своём сайте:

<script type="text/javascript">
	$(document).ready(function() {
		preload='';
		images="#picture img";
		for (i=0;$(images).length>i;i++) {
			// добавляем адреса картинок в формате 'src.jpg','src2.jpg'
			preload += '"' + $("#picture img").eq(i).attr("src") + '"';
			// не добавлять запятую в конец списка
			$("#picture img").length>(i+1) ? preload += "," : '';
		}
		// вызываем предзагрузку за полученным списком адресов картинок
		jQuery.preLoadImages(preload);
	});
	(function($) {
		var cache = [];
		// Arguments are image paths relative to the current page.
		$.preLoadImages = function() {
			var args_len = arguments.length;
			for (var i = args_len; i--;) {
				var cacheImage = document.createElement('img');
				cacheImage.src = arguments[i];
				cache.push(cacheImage);
			}
		}
	})(jQuery)
</script>

2. Код работает, если ваши картинки лежат в таком виде:

<div id="picture">
	<img src="http://site.ru/6.jpg" />
	<img src="http://site.ru/7.jpg" />
	<img src="http://site.ru/8.jpg" />
	<img src="http://site.ru/14.jpg" />
	<img src="http://site.ru/13.jpg" />
	<img src="http://site.ru/12.jpg" />
</div>

2.1. Выдернуть таким образом картинки из Textpattern можно с помощью плагина smd_gallery (ещё может сработать плагин soo_image)

<div id="picture">
	<txp:smd_gallery category="group">
		<img src="{url}" alt="{alt}" />
	</txp:smd_gallery>
</div>

Это, наверное, самое простое применение этого плагина – мы выводим все картинки, у которых категорий называется “group” (названия категорий пишутся только латинскими буквами – не путайте с заголовком)
Разница между Названием и Заголовком

Как настроить этот preload, если используется другая структура вывода картинок (несколько блоков, например)?

Очень просто. Представим себе, что у вас несколько блоков на странице, где выводятся картинки. Например:

<div class="left_box">
	<img src="http://site.ru/6.jpg" />
	<img src="http://site.ru/7.jpg" />
	<img src="http://site.ru/8.jpg" />
</div>
...
<div class="wrapper"><div class="glossy">
	<img src="http://site.ru/1.jpg" />
	<img src="http://site.ru/2.jpg" />
	<img src="http://site.ru/3.jpg" />
</div></div>
  1. Ищем строчку images="#picture img";
  2. Меняем её в соответствии с правилами селекторов jQuery – images=".picture img, .wrapper .glossy img";

Комментарии:

    • Mut@NT
    • 01 апреля 2010

    • И как это выглядит? Было бы очень удобно, если бы показали результат, ради чего воевали.

Для того чтобы иметь возможность оставлять комментарии, вам нужно включить JScript в настройках вашего браузера. Извините за возможные неудобства

Предзагрузить своё мнение [1]

  •  
  • Textile HTML Отображение
    _выделение_ <em>выделение</em> выделение
    *усиление* <strong>усиление</strong> усиление
    __курсив__ <i>курсив</i> курсив
    **полужирный** <b>полужирный</b> полужирный
    ??цитата?? <cite>цитата</cite> цитата
    bq. большая цитата <blockquote>большая цитата</blockquote>
    большая цитата
    -удалённый- <del>удалённый</del> удалённый
    +вставленный+ <ins>вставленный</ins> вставленный
    ^надстрочный^ <sup>надстрочный</sup> надстрочный
    ~подстрочный~ <sub>подстрочный</sub> подстрочный
    (с)AngryCAT &#169;AngryCAT ©AngryCAT
    Textile(r) Textile&#174; Textile®
    Textpattern(tm) Textpattern&#8482; Textpattern™
    длиное -- тире длиное &#8212; тире длиное — тире
    короткое - тире короткое &#8211; тире короткое – тире
    "ссылка":http://ya.ru <a href=”http://ya.ru”>ссылка</a> ссылка
    !http://ya.ru/logo.png! <img src=”http://ya.ru/logo.png”>