Question

我有一个包含很多图像的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>

Answer 1

最简单的方法是将“加载”gif设置为加载图像的元素的background-image CSS属性。当图像加载时，它们将掩盖“加载”GIF。

在div中加载图像时加载gif图像

1 个答案: