Вендорные префиксы и пути к картинками сами поменяете
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<style>
@keyframes fadeIn{
from{
opacity : 0;
}
to{
opacity : 1;
}
}
</style>
<script>
// 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
if (coord.y > my_height)
el.style.animation = 'fadeIn 2s ease-in ';
el.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};
}
</script>
<div id="gallery">
<img width="900" height="600" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" />
<img width="900" height="600" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" />
<img width="900" height="600" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" />
<img width="900" height="600" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" />
<img width="900" height="600" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" />
<img width="900" height="600" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" />
<img width="900" height="600" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" />
</div>
<script>
lazy_load();
</script>
</body>
</html>