Индикатор загрузки изображений
Здравствуйте..
Помогите разобраться, как реализовать, чтобы при загрузке сайта за место пустых блоков(пока не загрузилось изображения)показывался индикатор в формате gif(картинка)? Буду очень благодарен.. |
<!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>
|
..а можно просто назначить в css
img{background:transparent url(loading.gif) 50% 50% no-repeat}
.) |
а если у меня пнг изображения на прозрачном фоне?
css не подойдёт.. Спасибо devote, опробую, расскажу.. |
Цитата:
|
Немножко неправильно..
Мне надо, чтобы такой индикатор был над каждым загружаемым изображением, а не один индикатор по центру с текстом Loading...:) |
Ingiborn,
:) Какие сложности одеть в span каждое ? Именно это и подразумевал |
Непойму как=)
|
|
devote,
Смысл новый img создавать? Не проще на старый события повесить? |
Цитата:
|
Цитата:
|
Цитата:
|
Раед,
вот пример:
<!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>
|
Раед,
тут одна картинка имеет ошибочный адрес, и из-за этого надпись "Loading..." никогда не исчезнет. Поэтому использование img.complete тут не катит |
хм.. хотя иногда исчезает.. видимо onerror все же успевает отработать... но не всегда.
|
В ИЕ8 вообще всегда висит надпись "Loading..."
|
Цитата:
P.S. А что это за новая мода, вместо инкремент-декремент массивы юзать? |
Цитата:
Цитата:
|
Так как лучше делать?=)
|
Ребят помогите, очень надо..
|
Ingiborn,
Выложите HTML код двух -трёх картинок и минимального окружения - интересует первый один -два блока в который они вложены |
допустим слайдшоу.
<div id=""slider"> <img src="1"> <img src="2"> <img src="3"> </div> |
<style>
#slider img{
visibility:hidden;
background-color:#000;
background-image:url(http://uploads.ru/i/0/S/c/0ScZL.gif);
background-position:center center;
background-repeat:no-repeat;
}
</style>
<script type="text/javascript">
function LoImg(a) {
a.visibility='visible';
a.backgroundСolor='transparent';
a.backgroundImage='none';
}
</script>
<div id="slider">
<img src="1" onload="LoImg(this)">
<img src="2" onload="LoImg(this)">
<img src="3" onload="LoImg(this)">
</div>
|
jQuery
<style>
#slider img{
visibility:hidden;
display:inline-block;
background-color:#000;
background-image:url(http://uploads.ru/i/0/S/c/0ScZL.gif);
background-position:center center;
background-repeat:no-repeat;
}
</style>
<div id="slider" >
<img src="1" >
<img src="2" >
<img src="3" >
</div>
<script type="text/javascript">
$("#slider img").load(function() {
$(this).css({
'visibility':'visible',
'background-color':'transparent',
'background-image':'none'
});
});
</script>
|
А для общем функции #slider img заменить на img?
|
Ingiborn,
Ну наверно можно - если для всех изо -а не ток для слайдера - чревато тем - что, к примеру смайлик отсутствует - будет крутиться загрузка( в слайдере то обычно проверяете наличие |
А если подойти с другой стороны: на что человеку смотреть приятнее во времф загрузки большой картинки: на крутящуюся х*ню, или на саму загружающущюся картинку?)
|
Цитата:
|
Цитата:
Кстати, для того, о чём подуали вы, давно есть progressive jpeg. |
Спасибо Deff. Очень помог твой способ!
|
Пример ро jquery не работает, можно как то поправить?
|
всё именно также, всё равно не рабоает
|
оу, там дополнительная библиотека
|
Ingiborn,
Вариант кривой по-ходу - поскольку изо уже может быть в кеше - jQuery не успевает отследит load (нужно извращацо через делегирование |
то есть, не работает этот вариант?
я всё подключил как в примере, всё равно не работает.. |
и кеш чистил, всё равно не работает..
|
Цитата:
|
для jpg где нет прозрачного фона задал бэкграунд, для png решения так и не нашёл..
|
Ingiborn,
Пробуйте так:
<style>
span.wrap{
display:inline-block;
background-color:#000;
background-image:url(http://uploads.ru/i/0/S/c/0ScZL.gif);
background-position:center center;
background-repeat:no-repeat;
}
#slider img{
visibility:hidden;
}
</style>
<script type="text/javascript">
function LoImg(a) {
a.visibility='visible';
a.parentNode.backgroundСolor='transparent';
a.parentNode.backgroundImage='none';
}
</script>
<div id="slider">
<span class=wrap><img src="1" onload="LoImg(this)"><span>
<span class=wrap><img src="2" onload="LoImg(this)"><span>
<span class=wrap><img src="3" onload="LoImg(this)"><span>
</div>
|
| Часовой пояс GMT +3, время: 04:30. |