Теоритический вопрос

paska · March 5, 2011

Всем здрасте.

Есть сайт - три страницы: index.html, page2.html, page3.html. На двух из них: index.html и page2.html - не мало графики, включая тяжеловесный фон 2000х1250.

По запросу адреса сайта грузится index.html.

Я сделал эмуляцию загрузки страницы таким образом, что сразу после тега <body> вызывается ф-я loading, которая образно состоит из двух блоков:

1. накрываю всю страницу абсолютно спозиционированным блоком с GIF картинкой "loading" внутри.

2. по событию window.load -

убирается накрывающий фон;
показываются элементы страницы;

что-то типа такого:

...
<body>
<script>
function loading_page(){
// add loading box to the DOM

window.load = function(){
// remove loading box

// show elements on the page (fadeIn)
}
}
</script>
...

Дальше каждая страница подгружается асинхронно при помощи ajax.

Нужно прокешировать картинки на оставшихся двух или сразу для всех в ф-ии loading_page().

Думаю сделать запросы на скачивание картинок при помощи Image() объекта так:

...
<body>
<script>
function loading_page(){
// add loading box to the DOM

// preload all images
srcs = ["some_path/image1.jpg",...];// all images from all of 3 pages
for(i=0;i<srcs.length;i++)
   ImgObj.src = srcs[i];


window.load = function(){
// remove loading box

// show elements on the page (fadeIn)
}

}
</script>
...

Вопрос заключается в следующем:

правильно ли делать загрузку карнинок именно в этом месте (// preload all images).

Т.е. правильно ли я понял - параллельно делаются запросы на скачивание каждой из картинок. Дальше агент парсит html код линию за линией и как только види <img /> тег или стилевое значение ...url(some_path/image.jpg)... то делает запрос к серверу на скачивание этой картинки.

А если в этот же момент, эта же картинка загружается при помощи Image() объекта - то что будет делать обозреватель - пропустит дублирующий http запрос?

И будет ли потрачено существенное время, на выявление дублирующего запроса?

Может лучше после события window.onload для страницы index.html подгружать только картинки для оставшихся двух страниц: page2.html, page3.html?

Всем осилившим текст - заранее СПС

paska · March 10, 2011

Блин, читать походу впадлу столько текста...

Вот пример

Если кликнуть по линку page2 (первый раз. дальше браузер кеширует)- то появится страница с не догруженными картинками.

У кого есть идеи как решить такую проблему?

Great Rash · March 10, 2011

Не понятно зачем картинки вообще прелоадить? Ну пусть они сами по себе как-нить там грузятся...

swetlana · March 10, 2011

иногда надо.

Например, не всегда js правильно работает, если без предзагрузки.

paska · March 10, 2011

иногда надо.
Например, не всегда js правильно работает, если без предзагрузки.

верно. собственно что и происходит на странице с примером. для катинок там стоит скрипт, закругляющий картинки.

получается такое (как я понимаю): новый html был вставлен --> браузер дошел до первого тэга <img /> начал загрузку, до следующего, начал загрузку и т.д. --> браузер дошел до скрпита (в котором создаются эл-ты с width / height = width / height of img) и если к этому моменту картинка не догружена, то соотвтственно элемента будет с шириной ноль и высотой тоже ноль, так как у картинки еще нет ни высоты ни ширины. Поэтому когда работают со скриптами, выполняющимися над картникой - то ждут события onload (картинки / window), а затем уже запускается js. я поставил скругление в скрипте по загрузке ($("img").onload) - но при этом происходит ожидание пока картинки подгрузятся - не совсем красиво. хотелось бы что бы ко моменту запроса ajax - все нужные картинки были уже в кэше обозревателя - тогда будет заменто быстрее.

Вот мой вопрос отсюда - как это сделать?

Great Rash · March 11, 2011

хотелось бы что бы ко моменту запроса ajax - все нужные картинки были уже в кэше обозревателя - тогда будет заменто быстрее.

У объекта Image есть событие onload. Может аякс-запрос выполнять при наступлении этого события?

Вообще на вашей странице мне лично ничего не понятно, ну загрузились у меня картинки при клике на ссылку Page2, дальше то что? Что это должно проиллюстрировать?

paska · March 11, 2011

У объекта Image есть событие onload. Может аякс-запрос выполнять при наступлении этого события?

Я пробовал подгрузить ряд картинок через цикл: var imgs = ["img1.jpg","img2.jpg",...]'; for(i=0;i<imgs;i++) ImgObj.src=imgs;

При этом если посмотреть в Net панель Firebug - у картинок статус Aborted.

Где-то на форумах о HTTP прочитал, что такое может быть вызвано, когда выполнение скрипта было чем-то прервано. Или действиями юзера, или сам скрипт де дождался и "пошел дальше" (как я понял). Короче если бы сделать последовательную загрузку картинок - т.е. одна загрузилась, только тогда следующая - это думаю решилобы проблему.

Вообще на вашей странице мне лично ничего не понятно, ну загрузились у меня картинки при клике на ссылку Page2, дальше то что? Что это должно проиллюстрировать?

я поставил скругление в скрипте по загрузке ($("img").onload) - но при этом происходит ожидание пока картинки подгрузятся - не совсем красиво. хотелось бы что бы ко моменту запроса ajax - все нужные картинки были уже в кэше обозревателя - тогда будет заменто быстрее.

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

может когда идет загрузка "Please wait...Page is being loaded" подгружать все картинки.

Great Rash · March 11, 2011

Короче если бы сделать последовательную загрузку картинок - т.е. одна загрузилась, только тогда следующая - это думаю решилобы проблему.

У объекта Image есть событие onload.

1) грузим первую картинку

2) при наступлении события onload грузим следующую картинку

3) при наступлении события onload грузим следующую картинку

и т.д.

paska · March 11, 2011

да, спс. так и сделал

function preloadImgs(srcs){
var i=0;
ImgObj.onload = function(){
i++;
if(i<srcs.length) {
ImgObj.src = srcs;
} else {
return;
}
}
ImgObj.src = srcs;
}

s0rr0w · March 11, 2011

... и если к этому моменту картинка не догружена, то соотвтственно элемента будет с шириной ноль и высотой тоже ноль, так как у картинки еще нет ни высоты ни ширины.

Для этого есть атрибуты width и height

wanntuzz · March 11, 2011

Это програмировать надо

swetlana · March 12, 2011

Это програмировать надо

да неужели?

Sign In

Теоритический вопрос

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information