我有一个包含很多图像的 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>
最佳答案
最简单的方法是将“loading”gif 设置为加载图像的元素的 background-image CSS 属性。当图像加载时，它们将掩盖“loading” "动图。
关于javascript - 在 div 中加载图像时加载 gif 图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9459137/