Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.07.2012, 04:41
Кандидат Javascript-наук
Отправить личное сообщение для Ingiborn Посмотреть профиль Найти все сообщения от Ingiborn
 
Регистрация: 02.12.2009
Сообщений: 139

Индикатор загрузки изображений
Здравствуйте..
Помогите разобраться, как реализовать, чтобы при загрузке сайта за место пустых блоков(пока не загрузилось изображения)показывался индикатор в формате gif(картинка)?
Буду очень благодарен..
Ответить с цитированием
  #2 (permalink)  
Старый 16.07.2012, 05:24
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

<!DOCTYPE html>
<html>
	<head>
		<style>
			html, body {
				padding: 0;
				margin: 0;
			}
		</style>
		<script type="text/javascript">

function DOMReady( callback ) {

    if ( document.readyState === "complete" ) {
        return setTimeout( callback, 1 );
    }

    var loaded = function( doScroll ) {
        if ( document.removeEventListener ) {
            document.removeEventListener( 'DOMContentLoaded', loaded, false );
            window.removeEventListener( 'load', loaded, false );
            loaded = null;
            callback();
        } else if ( document.detachEvent ) {
            if ( document.readyState === "complete" || doScroll === null ) {
                document.detachEvent( 'onreadystatechange', loaded );
                window.detachEvent( 'onload', loaded );
                loaded = null;
                callback();
            }
        }
    }

    if ( document.addEventListener ) {
        document.addEventListener( "DOMContentLoaded", loaded, false );
        window.addEventListener( "load", loaded, false );
    } else if ( document.attachEvent ) {
        document.attachEvent( "onreadystatechange", loaded );
        window.attachEvent( "onload", loaded );
  
        var toplevel = false;
        try {
            toplevel = window.frameElement == null;
        } catch( _e_ ) {}
  
        if ( document.documentElement.doScroll && toplevel ) {
            var check = function() {
                if ( !loaded ) return;
                try {
                    document.documentElement.doScroll( "left" );
                } catch( _e_ ) {
                    setTimeout( check, 0 );
                    return;
                }
                loaded( null );
            }
            check();
        }
    }
}

DOMReady( function(){

	var imageScope = [],
		imgs = document.getElementsByTagName( 'img' ),
		bgdiv = document.createElement( 'DIV' ),
		div = document.createElement( 'DIV' );

	if ( imgs.length > 0 ) {

		bgdiv.style.cssText = "position: fixed; width: 100%; height: 100%; background-color: #000;"+
			"opacity: 0.3; filter: Alpha(opacity=30);";

		div.style.cssText = "position: fixed; padding: 20px; width: 100px; height: 20px; left: 50%; top: 50%;"+
			"margin: -30px 0 0 -70px; background-color: #fff; border: 1px solid #eaeaea; border-radius: 8px;"+
			"opacity: 0.7; filter: Alpha(opacity=70); box-shadow: 2px 2px 4px #000; font: 20px Arial; color: #f00;";

		div.innerHTML = 'Loading...';

		document.body.insertBefore( div, document.body.firstChild );
		document.body.insertBefore( bgdiv, document.body.firstChild );

		for( var i = 0; i < imgs.length; i++ ) {

			imageScope.push(1);

			var img = new Image();
			img.onload = img.onerror = function() {
				imageScope.pop();
				if ( imageScope.length == 0 ) {
					bgdiv.parentNode.removeChild( bgdiv );
					div.parentNode.removeChild( div );
				}
			}
		    img.src = imgs[ i ].src;
		}
	}

});

		</script>
	</head>
	<body>
		<img src="http://worldoftanks.ru/dcont/fb/media/batchat_ru_june_clear/1920x1200.jpg">
		<img id="img" src="http://wallpaper.goodfon.ru/image/302908-2880x1800.jpg"/>
	</body>
</html>
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine

Последний раз редактировалось devote, 16.07.2012 в 05:38.
Ответить с цитированием
  #3 (permalink)  
Старый 16.07.2012, 08:10
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,078

..а можно просто назначить в css
img{background:transparent url(loading.gif) 50% 50% no-repeat}
.)
__________________
29375, 35
Ответить с цитированием
  #4 (permalink)  
Старый 16.07.2012, 11:58
Кандидат Javascript-наук
Отправить личное сообщение для Ingiborn Посмотреть профиль Найти все сообщения от Ingiborn
 
Регистрация: 02.12.2009
Сообщений: 139

а если у меня пнг изображения на прозрачном фоне?
css не подойдёт..
Спасибо devote, опробую, расскажу..
Ответить с цитированием
  #5 (permalink)  
Старый 16.07.2012, 12:05
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Сообщение от Ingiborn
а если у меня пнг изображения на прозрачном фоне?
css не подойдёт..
Да наплевать - обрамляете в <span style="inline-block" - прописываете у span бекграунд(gif-картинкой) на время загрузки
Ответить с цитированием
  #6 (permalink)  
Старый 16.07.2012, 12:12
Кандидат Javascript-наук
Отправить личное сообщение для Ingiborn Посмотреть профиль Найти все сообщения от Ingiborn
 
Регистрация: 02.12.2009
Сообщений: 139

Немножко неправильно..
Мне надо, чтобы такой индикатор был над каждым загружаемым изображением, а не один индикатор по центру с текстом Loading...
Ответить с цитированием
  #7 (permalink)  
Старый 16.07.2012, 12:32
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Ingiborn,
Какие сложности одеть в span каждое ? Именно это и подразумевал
Ответить с цитированием
  #8 (permalink)  
Старый 16.07.2012, 12:35
Кандидат Javascript-наук
Отправить личное сообщение для Ingiborn Посмотреть профиль Найти все сообщения от Ingiborn
 
Регистрация: 02.12.2009
Сообщений: 139

Непойму как=)
Ответить с цитированием
  #9 (permalink)  
Старый 16.07.2012, 13:34
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Loader на время загрузки изображения
Ответить с цитированием
  #10 (permalink)  
Старый 16.07.2012, 18:29
Аватар для Раед
''
Отправить личное сообщение для Раед Посмотреть профиль Найти все сообщения от Раед
 
Регистрация: 11.12.2011
Сообщений: 636

devote,
Смысл новый img создавать? Не проще на старый события повесить?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Фейковый индикатор загрузки maximnara Элементы интерфейса 1 28.07.2011 18:32
Индикатор загрузки данных из базы wfire jQuery 13 20.06.2011 13:00
подскажите, как сделать индикатор «до начала загрузки страницы»? SergAG Элементы интерфейса 7 31.05.2011 19:53
Аjax запрос формирует div с изображениями, нужно показать после загрузки изображений Khmelevsky AJAX и COMET 2 13.09.2010 23:16
Уважаемые веб-мастера! индикатор загрузки Poslushnik Общие вопросы Javascript 5 11.10.2009 00:14