Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   подгрузка картинок (https://javascript.ru/forum/dom-window/31368-podgruzka-kartinok.html)

land15 05.09.2012 10:39

подгрузка картинок
 
Есть набор страниц в которых может находится до 400 картинок, на данный момент без структурирования, все в одном диве. Надо сделать подгруздку.
Возможно верстка поменяется, тогда я знаю, что делать.
Как организовать подгрузку при такой верстке. По каждому событию onscroll проверять координаты еще неподгруженных картинкок? Кажется будет плохо.
Как кто делал, поделитесь.

bes 07.09.2012 14:45

<style>
#div img {
	display: block;
}

</style>

<div id='div'></div>
<div style="height: 50%"></div>

<script>
window.onload = function () {
	var images = [
		'http://javascript.ru/forum/image.php?u=19820&dateline=1334914235',
		'http://javascript.ru/forum/images/ca_serenity/misc/logo.gif',
		'http://javascript.ru/forum/image.php?u=19820&dateline=1334914235',
		'http://javascript.ru/forum/images/ca_serenity/misc/logo.gif',
		'http://javascript.ru/forum/image.php?u=19820&dateline=1334914235',
		'http://javascript.ru/forum/images/ca_serenity/misc/logo.gif',
		'http://javascript.ru/forum/image.php?u=19820&dateline=1334914235',
		'http://javascript.ru/forum/images/ca_serenity/misc/logo.gif',
		'http://javascript.ru/forum/image.php?u=19820&dateline=1334914235',
		'http://javascript.ru/forum/images/ca_serenity/misc/logo.gif',
		'http://javascript.ru/forum/image.php?u=19820&dateline=1334914235',
		'http://javascript.ru/forum/images/ca_serenity/misc/logo.gif',
		'http://javascript.ru/forum/image.php?u=19820&dateline=1334914235',
		'http://javascript.ru/forum/images/ca_serenity/misc/logo.gif',
		'http://javascript.ru/forum/image.php?u=19820&dateline=1334914235',
		'http://javascript.ru/forum/images/ca_serenity/misc/logo.gif',
		'http://javascript.ru/forum/image.php?u=19820&dateline=1334914235',
		'http://javascript.ru/forum/images/ca_serenity/misc/logo.gif',
		'http://javascript.ru/forum/image.php?u=19820&dateline=1334914235',
		'http://javascript.ru/forum/images/ca_serenity/misc/logo.gif',
	];
	var len = images.length;
	var div = document.getElementById('div');
	var img;
	var n = 0;
	
	function createImage() {
		while (div.getBoundingClientRect().bottom < 200 && n < len) {
			img = document.createElement('img');
			img.setAttribute('src', images[n]);
			div.appendChild(img);
			n++;
		}
	}
	
	createImage();
	
	window.onscroll = function () {
		createImage();
	}
	
}
</script>

bot87 07.09.2012 16:47

есть отличный плагин jquery ( lazy -load вроде )

land15 08.09.2012 23:01

спасибо за ответы, уже сделал, bes примерно как у тебя, проверка координат контейнера + ajax запрос. Разрешили подгружать фиксированное количество картинок, так что все упростилось.


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