Загрузка рекламы по мере просмотра страницы

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

Это делается с несколькими целями, во-первых, снижается нагрузка на сервер, во-вторых, быстрее грузится страница, в-третьих, повышается показатель CTR, т.е. отношение кликов к просмотрам, т.к. многих просмотров реально не было.

Вот два рекламных блока, в которые будет загружена реклама:

// Рекламный баннер 1. Загружается сразу после загрузки основного контента страницы:
<div id="banner1" style="margin-top:15px;width:300px;height:150px;visibility:hidden;"></div>

// Рекламный баннер 2. Загружается после прокрутки страницы до области баннера:
<div id="banner2" style="margin-top:15px;width:180px;height:60px;visibility:hidden;"></div>

Исходный код этого примера:

<script>
// id - id DIV-блока в который будет загружен баннер
// onScroll=true - загрузить при прокрутке страницы
//         =false - загрузить сразу
// url=адрес страницы, которую нужно загрузить
var BannerLoader = function(id, onScroll, url){
	var cm=(document.compatMode=="CSS1Compat"),de=document.documentElement,db=document.body;
	var banner=obj=document.getElementById(id);
	if (!obj)return;
	var code=function(){
		return '<iframe src="'+url+'" frameborder="0" vspace="0" hspace="0" width="'+obj.style.width+'" height="'+obj.style.height+'" marginwidth="0" marginheight="0" scrolling="no" style="overflow:hidden"></iframe>';
		};
	if (!onScroll) { obj.innerHTML = code(); banner.style.visibility = "visible"; return; }
	var ar_top = parseInt(obj.style.height)/2;
	while(obj.offsetParent){ ar_top += obj.offsetTop; obj = obj.offsetParent; }
	var ar_scroll = function(){
		var ch = self.innerHeight || cm && de.clientHeight || db.clientHeight;
		var st = self.pageYOffset || cm && de.scrollTop || db.scrollTop;
		if (ar_top > st && st + ch > ar_top) {
			removeEvent(window, 'scroll', ar_scroll);
			banner.style.visibility = "visible";
			banner.innerHTML = code();
		}
	};
	addEvent(window, 'scroll', ar_scroll);
	ar_scroll();
};
onDomReady(function(){
	new BannerLoader("banner1", false, '/images/sunlife.jpg?rnd=' + Math.round(Math.random() * 100000000));
	new BannerLoader("banner2", true, '/pic/eaiti180x60.gif?rnd=' + Math.round(Math.random() * 100000000));
});
</script>

Рекламный баннер 1 загружается сразу после загрузки основного контента страницы:

Чтобы увидеть второй рекламный баннер, прокрутите страницу вниз.

Используемые здесь дополнительные функции вы можете взять здесь: onDomReady и addEvent.

Если Вам необходимо для загрузки рекламы использовать не iframe, а script, посмотрите, как динамически подгружать скрипты.

Рекламный баннер 2 загружается после прокрутки страницы до области баннера: