Добрый день, форумчане!
Есть скрипт который подгружает картинки по мере прокрутки страницы.
// ID родительского элемента
var lazy_parent_id='gallery';
function lazy_load() {
// Картинка-заместитель
var lazy_replacer='img/1px.png';
var container=document.getElementById(lazy_parent_id);
if (container) {
var im=container.getElementsByTagName('img');
// Сохранить адрес исходной картинки и заменить его на прозрачный GIF
for (var i=0; i<im.length; i++) {
var el=im[i];
if (el.src) {
el.setAttribute('lazy',el.src);
el.lazy=el.src;
el.src=lazy_replacer;
}
}
}
// Установить обработчики событий окна
window.onscroll = lazy_load_proc;
window.onresize = lazy_load_proc;
// Сразу же показать картинки в видимой области
lazy_load_proc();
}
function lazy_load_proc() {
var doc = document.documentElement;
var body = document.body;
// Получить размеры видимой области страницы (кроссбраузерно)
if (typeof(window.innerWidth) == 'number') {
my_width = window.innerWidth;
my_height = window.innerHeight;
}
else if (doc && (doc.clientWidth || doc.clientHeight)) {
my_width = doc.clientWidth;
my_height = doc.clientHeight;
}
else if (body && (body.clientWidth || body.clientHeight)) {
my_width = body.clientWidth;
my_height = body.clientHeight;
}
// Получить смещение страницы относительно ее верха
if (doc.scrollTop) { dy=doc.scrollTop; } else { dy=body.scrollTop; }
// Обработка всех картинок в контейнере
var container=document.getElementById(lazy_parent_id);
if (container) {
var im=container.getElementsByTagName('img');
for (var i=0; i<im.length; i++) {
var el=im[i];
// Если атрибут lazy есть, то обработать картинку
if (el.lazy) {
// Получить координаты картинки от верха страницы
var coord=lazy_get_position(el);
// Если картинка попала в видимую область, то показать ее.
// Плюс берется запас в 100 пикселов для более плавной подгрузки
if (coord.y>(dy-my_height-100) && coord.y<(dy+my_height+100)) {
// Прописать адрес исходной картинки и убрать атрибут lazy
el.src=el.lazy;
el.setAttribute('src',el.lazy);
el.lazy='';
el.removeAttribute('lazy');
}
}
}
}
}
function lazy_get_position(element) {
var offsetLeft=0;
var offsetTop=0;
do {
offsetLeft+=element.offsetLeft;
offsetTop+=element.offsetTop;
}
while (element=element.offsetParent);
return {x:offsetLeft, y:offsetTop};
}
<div id="gallery">
<img width="900" height="600" src="img/slides/01.jpg" />
<img width="900" height="600" src="img/slides/02.jpg" />
<img width="900" height="600" src="img/slides/03.jpg" />
<img width="900" height="600" src="img/slides/04.jpg" />
<img width="900" height="600" src="img/slides/05.jpg" />
<img width="900" height="600" src="img/slides/06.jpg" />
<img width="900" height="600" src="img/slides/07.jpg" />
<img width="900" height="600" src="img/slides/08.jpg" />
<img width="900" height="600" src="img/slides/09.jpg" />
<img width="900" height="600" src="img/slides/10.jpg" />
</div>
<script type="text/javascript">
lazy_load();
</script>
Скрипт работает. Но изображения появляются резко. Немного глаз режет.
Помогите, пожалуйста, сделать плавное появление изображений!
