Javascript-форум - Быстрая и синхронная подгрузка картинок.

Javascript-форум (https://javascript.ru/forum/)

- (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)

- - Быстрая и синхронная подгрузка картинок. (https://javascript.ru/forum/xhtml-html-css/40133-bystraya-i-sinkhronnaya-podgruzka-kartinok.html)

Цитата:

Сообщение от Deff (Сообщение 264094)

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>var d = 0;</script>
<div id=out></div>
<div style="position:absolute;z-index:-100;wisth:2px;height:2px;overflow:hidden" onload="++d">
<img src="http://javascript.ru/forum/image.php?u=18034&dateline=1325652067" onload="++d">
<img class="img" src="http://javascript.ru/forum/image.php?u=19820&dateline=1334914235" onload="++d">
<img class="img"src="http://javascript.ru/forum/image.php?u=19820&dateline=1334914235" onload="++d">
<img class="img"src="http://javascript.ru/forum/image.php?u=19820&dateline=1334914235" onload="++d">
</div>
<script>
alert(d)
var len = $(".img").size();
var int = setInterval(function () {
  if (d == len) {
    $(".img").appendTo("#out");
     clearInterval(int);
  }
}, 100);

</script>

У меня почему то этот пример не работает.
(или я что то не правильно понял..)
http://webmaster.ayrveda.ru/333/js_template.html
Поставил интервал 7000 но грузиться все равно всё сразу + не одномоментно.

Mike_Kharkov,
Я поправил

Чуть ускорил:

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>var d = 0;</script>
<style>
.hide {
  position:absolute;
  z-index:-100;
  visibility:hidden;
}
</style>
<div class="hide">
<img  class="img" src="http://javascript.ru/forum/image.php?u=18034&dateline=1325652067"  onload="d++">
<img class="img" src="http://javascript.ru/forum/image.php?u=19820&dateline=1334914235" onload="d++">
<img class="img"src="http://javascript.ru/forum/image.php?u=19820&dateline=1334914235" onload="d++">
<img class="img"src="http://javascript.ru/forum/image.php?u=19820&dateline=1334914235" onload="d++">
</div>
<script>
var len = $(".img").length;
var int = setInterval(function () {
  if (d >= len) {
    $(".hide").removeClass("hide");
     clearInterval(int);
  }
}, 100);
</script>

Всё равно та же проблема.
(на сколько я понял.)
Поставил 3000 - но подгрузка происходит моментально.
http://webmaster.ayrveda.ru/333/js_template.html

Mike_Kharkov,
ерунда увеличивать, - 100 - норма для теста, особенно если картинки малые - у меня нормально работает на всех браузерах и картинках... Поскольку идея однозначная - как только подгружены все - все и вылазит, другое дело, что само открытие картинок, лучше делать после рендинга всей страницы, т.е после загрузки картинок дождаться $(document).ready(function()

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>var d = 0;</script>
<style>
.hide {
  position:absolute;
  z-index:-100;
  visibility:hidden;
}
</style>
<div class="hide">
<img  class="img" src="http://javascript.ru/forum/image.php?u=18034&dateline=1325652067"  onload="d++">
<img class="img" src="http://javascript.ru/forum/image.php?u=19820&dateline=1334914235" onload="d++">
<img class="img"src="http://javascript.ru/forum/image.php?u=19820&dateline=1334914235" onload="d++">
<img class="img"src="http://javascript.ru/forum/image.php?u=19820&dateline=1334914235" onload="d++">
</div>
<script>
var len = $(".img").length;
var int = setInterval(function () {
  if (d >= len) {
$(document).ready(function(){
    $(".hide").removeClass("hide");
    clearInterval(int);
});

  }
}, 100);
</script>

Типично же, применяют вариант подгрузки картинок на предыдущей странице, перед показом, в аналогичный cкрытый div, - без всяких скриптов, (типично пользователь на ней находится долее подгрузки их всех
div должен стоять в самом конце страницы, дабы не утомлять пользователя задержками

Смотрите.
Дело в том, что мне необходимо что бы картинки(в том числе и очень большие, при необходимости) подгружались не по частям, а целиком!
(одномоментно!)
В вашей реализации мне этого добиться не удалось потому, что не могу поставить большой временной интервал.
Если временной интервал ставить маленьким то тогда картинка(если большая + скорость инета маленькая) разворачивается постепенно(как заранее свёрнутый бумажный лист). Именно такое развитие событий и не устраивает моего заказчика.
Из за этого, собственно говоря, я и создал данный пост..
P.S. Понимаете мою мысль?

Цитата:

Сообщение от Mike_Kharkov

то тогда картинка(если большая + скорость инета маленькая) разворачивается постепенно(как заранее свёрнутый бумажный лист).

Тут уже речь не о подгрузке(подгрузка по скрипту уже завершена), а о рендинге - браузером
тут возможны такие Варианты
1. Перевести все картинки в png - уже подгруженные - они рендяцо быстрее - но грузятся чуть долее
2. Отрендить загруженные картинки с opacity: 0 и абсолютным позицонированием
(Окончание рендинга текущей картинки отслеживаем по высоте или ширине картинки(которую желательно знать заранее или тестировать прекращение её приращения), а затем перевести их класс в видимые

Мысль примерно понял.
Спасибо!

>> 2. Отрендить загруженные картинки с opacity: 0 и абсолютным позицонированием
а затем перевести их класс в видимые

Мне кажется абсолютное позиционирование будет лишним в данном случае? Или я ошибаюсь?
(Всё равно же картинка будет изначально прозрачна. Какой смысл её позиционирование изменять?)

Цитата:

Сообщение от Mike_Kharkov

Мне кажется абсолютное позиционирование будет лишним в данном случае? Или я ошибаюсь?

Если не абсолютное - то внешний блок будет видимо менять размеры при большой картинке, если наплевать - то можно и не абсолютно
второе - большие картинки рендяцо и при перемещении по странице
так что желательно выставить обертку уже по размерам и там рендить картинку

:) В принципе, при такой задаче, вероятно удобнее ставить картинки фоном к заранее созданным блокам с выставленными размерами, поскольку блоки с начальным opacity:0;эти блоки должны быть конечными ветками дерева, дабы не влиять на потомков