Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 16.07.2012, 18:34
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Сообщение от Раед
Смысл новый img создавать? Не проще на старый события повесить?
ну а ты попробуй, если изображение маленькое, то оно загрузится мгновенно, и событие сработает до того как мы на него что-то повесим, а значит наше событие может не сработать. И это может привести к бесконечному показу loading...
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #12 (permalink)  
Старый 16.07.2012, 19:04
Аватар для Раед
''
Отправить личное сообщение для Раед Посмотреть профиль Найти все сообщения от Раед
 
Регистрация: 11.12.2011
Сообщений: 636

Сообщение от devote
если изображение маленькое, то оно загрузится мгновенно, и событие сработает до того как мы на него что-то повесим, а значит наше событие может не сработать.
img.complete
Ответить с цитированием
  #13 (permalink)  
Старый 16.07.2012, 19:16
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Сообщение от Раед
img.complete
а если сурс ошибочный? ведь img.complete так и останется со значением false, если ошибочный адрес ввести.. Поэтому событие onerror тоже нужно отлавливать, что бы убрать надпись
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #14 (permalink)  
Старый 16.07.2012, 19:19
что-то знаю
Отправить личное сообщение для 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++ ) {
			if ( !imgs[i].complete ) {

				imageScope.push(1);

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

});

		</script>
	</head>
	<body>
		<img src="роывп рыпва">
		<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 в 19:22.
Ответить с цитированием
  #15 (permalink)  
Старый 16.07.2012, 19:20
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Раед,
тут одна картинка имеет ошибочный адрес, и из-за этого надпись "Loading..." никогда не исчезнет. Поэтому использование img.complete тут не катит
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #16 (permalink)  
Старый 16.07.2012, 19:23
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

хм.. хотя иногда исчезает.. видимо onerror все же успевает отработать... но не всегда.
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #17 (permalink)  
Старый 16.07.2012, 19:29
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

В ИЕ8 вообще всегда висит надпись "Loading..."
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #18 (permalink)  
Старый 16.07.2012, 19:52
Аватар для Раед
''
Отправить личное сообщение для Раед Посмотреть профиль Найти все сообщения от Раед
 
Регистрация: 11.12.2011
Сообщений: 636

Сообщение от devote
тут одна картинка имеет ошибочный адрес, и из-за этого надпись "Loading..." никогда не исчезнет
У меня всегда исчезает (FF13)

P.S. А что это за новая мода, вместо инкремент-декремент массивы юзать?
Ответить с цитированием
  #19 (permalink)  
Старый 16.07.2012, 20:12
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Сообщение от Раед
У меня всегда исчезает (FF13)
ну мы же пишем не под один FF

Сообщение от Раед
P.S. А что это за новая мода, вместо инкремент-декремент массивы юзать?
Да собственно без разницы. Можно что угодно юзать. Этож лишь пример. Сам не знаю с чего я о массивах подумал когда писал..
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #20 (permalink)  
Старый 16.07.2012, 20:42
Кандидат Javascript-наук
Отправить личное сообщение для Ingiborn Посмотреть профиль Найти все сообщения от Ingiborn
 
Регистрация: 02.12.2009
Сообщений: 139

Так как лучше делать?=)
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Фейковый индикатор загрузки 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