Быстрая и синхронная подгрузка картинок.
Добрый вечер.
Недавно у меня появился проект на котором требуется, что бы вся графика на странице появлялась(при загрузке страницы) одновременно и без особых задержек. Вопрос: Какие механизмы на сегодняшний день существуют в этом плане? (можно ли это организовать спрайтами или при помощи JS что-нибудь придумать?) |
Цитата:
"без особых задержек" - расплывчатая формулировка я тоже хочу, чтобы у меня было пару гигов фото, а отобразилось всё мгновенно при открытии страницы :haha: |
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<style>
.img {display: none}
</style>
<img src="http://javascript.ru/forum/image.php?u=18034&dateline=1325652067">
<img class="img" src="http://javascript.ru/forum/image.php?u=19820&dateline=1334914235">
<img class="img"src="http://javascript.ru/forum/image.php?u=19820&dateline=1334914235">
<img class="img"src="http://javascript.ru/forum/image.php?u=19820&dateline=1334914235">
<script>
jQuery(function ($) {
var d = 0;
var images = $(".img");
var len = images.size();
images.each(function() {
$(this).on("load", function () {
d++;
});
});
var int = setInterval(function () {
if (d == len) {
images.show();
clearInterval(int);
}
}, 500);
});
</script>
если вообще все, то просто по window.onload если хоть с одной будут проблемы, не покажется ничего :) |
each можно убрать
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<style>
.img {display: none}
</style>
<img src="http://javascript.ru/forum/image.php?u=18034&dateline=1325652067">
<img class="img" src="http://javascript.ru/forum/image.php?u=19820&dateline=1334914235">
<img class="img"src="http://javascript.ru/forum/image.php?u=19820&dateline=1334914235">
<img class="img"src="http://javascript.ru/forum/image.php?u=19820&dateline=1334914235">
<script>
jQuery(function ($) {
var d = 0;
var images = $(".img");
var len = images.size();
images.on("load", function () {
d++;
});
var int = setInterval(function () {
if (d == len) {
images.show();
clearInterval(int);
}
}, 500);
});
</script>
|
bes,
а в ие проверяли? |
Цитата:
|
на форуме через ie - да, чёт не всё ладно
|
bes,
пробовал ие и без форума результат тотже нет картинок. |
Цитата:
Цитата:
Проверил у себя: C форума в IE тоже проблема - но с локалки в IE отображается в норме.(если картинки маленькие.) Если картинки побольше и все это дело на хостинг залить - то тогда всё это дело работает через раз. (По крайней мере лично у меня..) http://webmaster.ayrveda.ru/111/js_template.htmlhttp://webmaster.ayrveda.ru/111/js_template.html Пробовал увеличивать временной интервал(до 3500) - но это не помогает. В норме работает(всё это дело) только, если картинки уже в кеше браузера есть.. |
<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;visibility:hidden">
<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) {
$(".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. Понимаете мою мысль? |
Цитата:
тут возможны такие Варианты 1. Перевести все картинки в png - уже подгруженные - они рендяцо быстрее - но грузятся чуть долее 2. Отрендить загруженные картинки с opacity: 0 и абсолютным позицонированием (Окончание рендинга текущей картинки отслеживаем по высоте или ширине картинки(которую желательно знать заранее или тестировать прекращение её приращения), а затем перевести их класс в видимые |
Мысль примерно понял.
Спасибо! >> 2. Отрендить загруженные картинки с opacity: 0 и абсолютным позицонированием а затем перевести их класс в видимые Мне кажется абсолютное позиционирование будет лишним в данном случае? Или я ошибаюсь? (Всё равно же картинка будет изначально прозрачна. Какой смысл её позиционирование изменять?) |
Цитата:
второе - большие картинки рендяцо и при перемещении по странице так что желательно выставить обертку уже по размерам и там рендить картинку |
:) В принципе, при такой задаче, вероятно удобнее ставить картинки фоном к заранее созданным блокам с выставленными размерами, поскольку блоки с начальным opacity:0;эти блоки должны быть конечными ветками дерева, дабы не влиять на потомков
|
Цитата:
а я уж начал забывать :) надо покрутить с форматом адреса, например, лишние символы там убирать или ещё чего, но это вечером |
попробуем такой ход
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<style>
.img {display: none}
</style>
<img src="http://javascript.ru/forum/image.php?u=18034&dateline=1325652067">
<img class="img" src="http://javascript.ru/forum/image.php?u=19820&dateline=1334914235">
<img class="img"src="http://javascript.ru/forum/image.php?u=19820&dateline=1334914235">
<img class="img"src="http://javascript.ru/forum/image.php?u=19820&dateline=1334914235">
<script>
jQuery(function ($) {
var d = 0;
var images = $(".img");
images.each(function() {
$(this).on("load", function () {
d++;
});
this.src = this.src;
});
var len = images.size();
var int = setInterval(function () {
if (d == len) {
images.show();
clearInterval(int);
}
}, 500);
});
</script>
|
как ни странно - работает :)
|
bes,
Тут есть две идеи 1. Картинка может подгрузиться до jQuery(function ($) { 2. Мелкие картинки могут подгрузиться до окончания блока с картинками, поэтому возможно лучше onload ставить на тег 3. Похоже у чела проблемы не с подгрузкой, а с рендингом больших изо на странице, ибо перевод в bmp и построчное отражение картинки на странице занимает время, в итоге все картинки не будут отражены одновременно, нужно подгружать с opacity:0 или visibility:hidden и тестить окончание приращений высоты |
Цитата:
|
bes,
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<div style="overflow:auto; width:100%;height:300px">
<img src="http://www.gog.com/upload/images/2013/06/4a97d96f01382e2d3de6435cc9bf4134bf21c62c.jpg">
</div>
<script>
var d=0;
$("img").on("load", function () {
var height=[]
var int = setInterval(function () {
if ($("img").height() == height[0]) {
alert(height)
clearInterval(int);
} height.push($("img").height());
}, 1);
});
</script>
|
Цитата:
через height этого не сделать |
bes,
:-E Походу соврал - пойду умоюсь |
Deff, вот мой простой пример
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<img class="img" src="http://www.gog.com/upload/images/2013/06/4a97d96f01382e2d3de6435cc9bf4134bf21c62c.jpg">
<script>
jQuery(function ($) {
var img = $(".img").eq(0);
var int = setInterval(function () {
console.log(img.height());
}, 1);
});
</script>
|
bes,
:) Тогда я не понимаю, почему у чела не одновременно... Хотя у cyber был подобный эффект при перетаскивании мап карты(хотя может уже забыл нюансы |
Цитата:
http://webmaster.ayrveda.ru/555/js_template.html Но так как на форуме - данный пример у меня работает только в IE + Mazilla!? (И то, при условии, что картинка не очень большой должна!) Не знаете - в чём причина может быть? (Может с подключением кода что то не так или с хостингом?) |
Цитата:
пример лишь показывает, что приращение высоты через height не получить спроси у заказчика, где он увидел подобный эффект |
Понял вас. Спасибо!
|
Но почему тогда ваш пример работает на форуме?
(так как нужно + во всех браузерах..) |
Цитата:
Цитата:
|
Цитата:
Посто визуально картинка с первого раза(когда её в моём кэше ещё не было) открылась мгновенно. (+ кроссбраузерно.) Пусть и с небольшой задержкой - но именно так как надо. (Хотелось бы такой же результат получить и у себя..) |
Хотя сейчас подумал и возможно ваш пример сработал у меня так потому, что до этого я просмотрел пример Deffa - а у него такая же картинка использовалась!(только сейчас это увидел..)
Наверное она из за этого уже ко мне в кешь попала и ваш пример соответственно быстро подгрузился.. (Я тогда не обратил внимание на этот факт..) |
Цитата:
|
))
|
| Часовой пояс GMT +3, время: 09:46. |