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)

bes 25.07.2013 06:48

Цитата:

Сообщение от рони
bes,
пробовал ие и без форума результат тотже нет картинок.

http://javascript.ru/forum/misc/3962...-kartinok.html
а я уж начал забывать :)
надо покрутить с форматом адреса, например, лишние символы там убирать или ещё чего, но это вечером

bes 25.07.2013 19:39

попробуем такой ход
<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 25.07.2013 19:39

как ни странно - работает :)

Deff 25.07.2013 20:51

bes,
Тут есть две идеи
1. Картинка может подгрузиться до jQuery(function ($) {
2. Мелкие картинки могут подгрузиться до окончания блока с картинками, поэтому возможно лучше onload ставить на тег
3. Похоже у чела проблемы не с подгрузкой, а с рендингом больших изо на странице, ибо перевод в bmp и построчное отражение картинки на странице занимает время, в итоге все картинки не будут отражены одновременно, нужно подгружать с opacity:0 или visibility:hidden и тестить окончание приращений высоты

bes 25.07.2013 22:29

Цитата:

Сообщение от Deff
и тестить окончание приращений высоты

первый раз слышу, что можно определить приращение высоты картинки при её загрузке, есть ссылка на API?

Deff 25.07.2013 22:51

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>

bes 25.07.2013 22:56

Цитата:

Сообщение от Deff
bes,
При рендинге - картинка загружена - но большие - рендяцо отражаются долго

так можно ли как-то определить это приращение?
через height этого не сделать

Deff 25.07.2013 23:09

bes,
:-E Походу соврал - пойду умоюсь

bes 25.07.2013 23:17

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>

Deff 25.07.2013 23:50

bes,
:) Тогда я не понимаю, почему у чела не одновременно...
Хотя у cyber был подобный эффект при перетаскивании мап карты(хотя может уже забыл нюансы


Часовой пояс GMT +3, время: 00:03.