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

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

Ниже представлен блок кода реализующий этот механизм:

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

Это рекламный банер 1. Загружается сразу после загрузки основного контента страницы:
<div id=\"banner1\" style=\"clear:both;margin-left:0px;padding-top:5px;width: 120px;height: 300px;visibility:hidden;\"></div>

Это рекламный банер 2. Загружается после прокрутки страницы в область банера:
<div id=\"banner2\" style=\"clear:both;margin-left:160px;padding-top:5px;width: 600px;height: 95px;visibility:hidden;\"></div>

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

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

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

<script type="text/javascript">
<!--
// 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, '/pic/taxi.gif?rnd=' + Math.round(Math.random() * 100000000));
	new BannerLoader("banner2", true, '/pic/eaiti180x60.gif?rnd=' + Math.round(Math.random() * 100000000));
});

//-->
</script>

Скопировать в буфер

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

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

Это рекламный банер 2. Загружается после прокрутки страницы в область банера:

© Copyright 2008-2012 by KDG