在图片加载完成之前显示preload.gif

Question

在图片加载完成之前显示preload.gif

3

我有一个图像库，我想给所有的图像标签分配一个类名，在加载完之前显示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名称，但我希望给所有的图片标签分配类名。

- Reza Mazarlou

我不是很明白，您想在加载图库中的所有图片之前显示“加载中”GIF吗？ - Lord Grosse Jeanine

我想在图库中的每张图片加载前显示一个loading.gif。 - Reza Mazarlou

我正在努力弄清楚它，因为我非常喜欢拥有这个想法。 - Spencer May

2个回答

0

你可以将 loading.gif 作为你的图片 CSS 类的背景图像。它必须是预加载或 base64 数据 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/ （注意：如果您想再次运行演示，请清除浏览器缓存）。

- Yuriy Galanter

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Spencer May · Accepted Answer

我终于成功了！我试过几种不同的方法，但这种方法对我来说效果最好。

我最初将图片设置为加载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标签中设置原始图像源，从而使所有内容保持紧密联系。