Question

如何在加载大图片时显示加载图片？

作为Orkut在用户相册中查看照片时的示例，在照片完全加载之前，照片上会显示加载图像。

我需要实现该功能。

我的问题是如何实现该功能？是不是可以不使用JQuery？

请帮忙。

Answer 1

将图像包裹在div（或任何你想要的）中，并将其背景图像设置为动画gif或任何你想要的加载图像。当图像完成加载时，它将覆盖背景图像。简单，可以在任何地方重复使用。

<div class="loading">
    <img src="bigimage.jpg" alt="test" />
</div>

CSS：

.loading{
    background:transparent url(loadinggif.gif) center center no-repeat;
}

Answer 2

这是一种基本技术，您可以使用

进行更详细的介绍

<html>
<head>
  <title>Test Page</title>
  <script type="text/javascript">
    onload = function()
    {
      // Create an image object. This serves as a pre-loader
      var newImg = new Image();

      // When the image is given a new source, apply it to a DOM image
      // after it has loaded
      newImg.onload = function()
      {
        document.getElementById( 'test' ).src = newImg.src; 
      }

      // Set the source to a really big image
      newImg.src = "http://apod.nasa.gov/apod/image/0710/iapetus2_cassini_big.jpg";       
    }
  </script>
</head>

<body>

<img id="test" src="http://upload.wikimedia.org/wikipedia/commons/4/42/Loading.gif" >

</body>
</html>

Answer 3

编辑：显然，这已被弃用。没什么好看的，继续前进。

这不需要JavaScript或CSS。只需使用lowsrc元素的内置但很少听到的img属性。

<img src="giant-image.jpg" lowsrc="giant-image-lowsrc.gif">

基本思想是您创建一个额外的非常压缩的，可能是正常图像的黑白版本。它首先被加载，当下载全分辨率图像时，浏览器会自动替换它。最好的部分是你不必做任何事情。

请在此处查看：http://www.htmlcodetutorial.com/images/_IMG_LOWSRC.html

Answer 4

您可以使用jQuery Lazy Loading plugin。它允许您指定加载图像并延迟加载大图像，直到它们滚动到视图中。

Answer 5

以前我为类似的问题做了类似的事情：

<script>
    function imageLoaded(img) {
        document.getElementById('loadingImage').style.visibility='hidden';
        img.style.visibility='visible';
    }
</script>
...
<img id='loadingImage' src='loading.gif'/>
<img src='bigImage.jpg' style='visibility:hidden;' onload='javascript:imageLoaded(this);'/>

我认为这种方法有一些有用的优点：

隐藏加载图片。想象一下，你的大形象并不像你期望的那么大......
你可以在javascript函数中做一些额外的事情。在我的情况下，我根据图像的大小拉伸图像宽度，高度或两者。

如何在加载大图像时显示加载图像？

5 个答案: