здрасте.
Така идея.
Есть навигация из трех ссылок, для трех страниц на 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()).
Или может есть идеи получше.
