Question

我有一个图像库，我想为所有图像标记分配一个类名，在完成加载显示preload.gif之前，当图像加载完成时，显示图像。我尝试使用此代码：

<!DOCTYPE html>
<html>
  <head>
    <script>
      function myFunction() {
        alert("Image loaded: " + document.getElementsById("myImg").complete);
      }
    </script>
  </head>
  <body onload="myFunction()">
    <p>This property returns true if the image is finished loaded, and false if not.</p>
    <img class="myImg" src="compman.gif" alt="Computerman" width="107" height="98">
  </body>
</html>

此代码支持ID名称，但我想为所有图像标记分配类名

Answer 1

我终于明白了！我尝试了几种不同的方法，但这种方式最适合我。

我有最初设置为加载gif的图像，一旦gif加载它调用一个函数来加载图像。加载图像后，该功能会根据您发送的参数更改原始图像的来源。

的Javascript

function loadimage(imgsrc, change){
  var loadimage = new Image();
  loadimage.onload = changesrc(imgsrc, change);
  loadimage.src = imgsrc;
}

function changesrc(imgsrc, change) {
  change.src=imgsrc;
}

HTML（我链接的照片很大，请确保您看到加载

<img onload="loadimage('http://upload.wikimedia.org/wikipedia/commons/4/49/Swiss_Jungfrau_mountains.jpg',this);" src="http://jimpunk.net/Loading/wp-content/uploads/loading2.gif">

通过这种方式，您可以在img中设置原始图像源，从而将所有内容保持在一起。

Answer 2

您可以使用loading.gif作为图片CSS类的背景图片。它必须是预加载或base64 data-uri。这样它将首先显示所有图像，然后真实图像将通过SRC加载。

<img class="gal" src="[your image URL]" />

.gal {
    width: 170px;
    height: 104px;
    background-image: url([your loading.gif])
}

演示：http://jsfiddle.net/ygalanter/bv3Hd/2/

（注意：如果您想再次运行演示，请清除浏览器缓存。）

在图像加载完成之前显示preloader.gif

2 个答案: