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