[Paska]

здрасте.

Така идея.
Есть навигация из трех ссылок, для трех страниц на index.html. По клику на ссылку - делаю http request к соответствующей странице. По получении ответа от сервера - нахожу на странице div#content, скрываю его, меняю innerHTML на тот, что пришел c сервера (на каждой из страниц есть div#content). Дальше показываю div#content.

На странице (условно) somepage.htlm - находится не мало графики, в виде: <img />.
Я так понимаю, что как только я вставил в div#content новый innerHTML (полученный с сервера) - обозреватель сразу начинает парсить его, как часть DOM текущей страницы и как только находит <img /> тэг - делате запрос к серверу на скачивание. И когда я проявляю div#content - проявляется и удручающая картина, в виде не догруженных картинок (сори за тавтологию).

Скрипт для вызова AJAX выглядит примерно так:

function page_loading(){
		$.ajax({
			type: "GET",
			url : "somepage.html",
			dataType : "html",
			success  : function(data){
				var contentDiv = $("#content");
				var new_html = $("#content",data).html();
				
				$(contentDiv).fadeTo(500,0,function(){
					$(this).html(new_html).fadeTo(500,1,function(){
						$(a).bind("mouseover",hover);
						$(a_active).bind("click",function(e){e.preventDefault()});
					});
				});
			}
		});
	}
$("a").bind("click",page_loading);

Я думаю о таком решении - нужно форсировать браузер прокешировать картинки до того, как будет изменен innerHTML блока div#content. И делать это думаю при помощи объекта Image(). Вот примерный код, с учетом ф-ии preloadImgs().

function preloadImgs(srcs,consistent){
	var Img = new Image();
	
	// только одна картинка
	if (typeof srcs == 'string') srcs=[srcs];
	
	if (!consistent) {// параллельная загрузка
		for(i=0;i<srcs.length;i++)
			Img.src = srcs[i];
	} else {// последовательная загрузка
		var i=0,img_loaded=true;
		
		Img.onload = function(){
			i++;
			img_loaded=true;
			send();
		}
		function send(){
			if (i>=srcs.length) return;
			if (img_loaded) {
				Img.src = srcs[i];
				img_loaded=false;
			}
			send();
		}
		return send();
	}	
}
function page_loading(){
	$.ajax({
		type: "GET",
		url : "somehtml.html",
		dataType : "html",
		success  : function(data){
		// прокешировать все картинки для текущего ответа сервера
			var imgs = match_all(/<img\s+.*?src="([^"]+)"/gi, data)[1];// ф-я match_all() опущена.она берет все совпадения вместо одного
			preloadImgs(imgs,true);
		// замена html кода на вновь пришедший с сервера
			var contentDiv = $("#content");
			var new_html = $("#content",data).html();
			
			$(contentDiv).fadeTo(500,0,function(){
				$(this).html(new_html).fadeTo(500,1,function(){
					$(a).bind("mouseover",hover);
					$(a_active).bind("click",function(e){e.preventDefault()});
				});
			});
		}
	});
}
$("a").bind("click",page_loading);

Проблема в том, что мне нужна последовательная загрузка картинок (что бы скачались абсолютно все карники, к момнету подмены кода). И я не могу врубится, как сделать такую рекурсию (если она тут вообще нужна). Если делать, как это сделано на линии 10, preloadImgs() - то будет ошибка типа: "to many recursions...".

У кого какие идеи как сделать последовательную загрузку картинок (что бы только после послденей скачанной картинки из всего массива - браузер перешел на следующую линию кода за ф-ей preloadImgs()).

Или может есть идеи получше.