|
Быстрая и синхронная подгрузка картинок.
Добрый вечер.
Недавно у меня появился проект на котором требуется, что бы вся графика на странице появлялась(при загрузке страницы) одновременно и без особых задержек. Вопрос: Какие механизмы на сегодняшний день существуют в этом плане? (можно ли это организовать спрайтами или при помощи 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>
|
| Часовой пояс GMT +3, время: 19:45. |
|