Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Плавное появление картинок (https://javascript.ru/forum/misc/62080-plavnoe-poyavlenie-kartinok.html)

K_PECT 23.03.2016 19:58
Плавное появление картинок
 
Добрый день, форумчане!
Есть скрипт который подгружает картинки по мере прокрутки страницы.

// 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>

Скрипт работает. Но изображения появляются резко. Немного глаз режет.
Помогите, пожалуйста, сделать плавное появление изображений!

K_PECT 24.03.2016 20:27
Может попробовать, например, через $("#gallery").fadeIn(1000);
Правда не совсем понимаю как это реализовать.
В идеале картинка должна сначала загрузиться, а потом плавно появиться.
Помогите если не трудно!

destus 24.03.2016 21:58
Вендорные префиксы и пути к картинками сами поменяете
<!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>

K_PECT 24.03.2016 22:37
Огромное спасибо! Очень благодарен! Выручили!:thanks:

рони 24.03.2016 22:46
destus,
var-а маловато :)


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