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

Him*_*dri 10 javascript asp.net load image

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

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

我需要实现该功能.

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

请帮忙.

Nin*_*omb 16

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

<div class="loading">
    <img src="bigimage.jpg" alt="test" />
</div>
Run Code Online (Sandbox Code Playgroud)

CSS:

.loading{
    background:transparent url(loadinggif.gif) center center no-repeat;
}
Run Code Online (Sandbox Code Playgroud)

  • 包装器`div`不是必需的.您可以将背景应用于图像.此外,如果图像是透明的,则加载图像将在下方可见 (2认同)

Pet*_*ley 10

这是一个基本技术,你可以扩展,以做更多精心设计的东西

<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>
Run Code Online (Sandbox Code Playgroud)


Jus*_*son 5

编辑:显然,这已被弃用。这里没什么好看的,离开。


为此不需要 JavaScript 或 CSS。只需使用元素的内置但很少听说的lowsrc属性即可img

<img src="giant-image.jpg" lowsrc="giant-image-lowsrc.gif">
Run Code Online (Sandbox Code Playgroud)

基本思想是创建一个额外的非常压缩的、可能是正常图像的黑白版本。它首先被加载,当下载全分辨率图像时,浏览器会自动替换它。最好的部分是您无需执行任何操作。

在这里查看: http: //www.htmlcodetutorial.com/images/_IMG_LOWSRC.html