У меня есть div, который содержит много изображений. При просмотре с плохим подключением к Интернету изображения загружаются сверху вниз медленно. Я хочу, чтобы, когда изображения все еще находились в процессе загрузки, я отобразил gif, чтобы показать пользователям, что изображения загружаются. Когда изображения загружены, GIF исчезает.
У меня есть этот код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title></title>
<meta name="description" content="" />
<meta name="author" content="acer" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<style>
#container {
width:355px;
height:355px;
}
</style>
<script type="text/javascript">
function init() {
document.getElementById('click').addEventListener('click',function() {
$('#container').html('<a href="http://www.wilsoninfo.com" target="_blank"><img src="http://i213.photobucket.com/albums/cc229/wil5037/tree10.gif" border="0" alt="Free Clipart"></a>').show();
$('#container').html('<img src="lantern1.png" alt=""/><img src="lantern2.png" alt=""/>').show();
});
}
</script>
</head>
<body onload="init()">
<div id="container">
Click Button
</div>
<input type="button" id="click" value="Click to load image" />
</body>
</html>