加载大图像时如何显示加载图像？答案

【问题标题】：How to show loading image when a big image is being loaded?加载大图像时如何显示加载图像？
【发布时间】：2010-12-06 13:32:08
【问题描述】：

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

例如，在 Orkut 中查看用户相册中的照片时，照片上会显示一个加载图像，直到照片完全加载。

我需要实现该功能。

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

请帮忙。

【问题讨论】：

标签： asp.net javascript image load

【解决方案1】：

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

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

CSS：

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

【讨论】：

包装器div 不是必需的。您可以将背景应用到图像。此外，如果图像是透明的，加载图像将在下方可见
使用 asp.net ajax 或简单的 javascript nto JQuery 还有其他方法吗？请帮忙。谢谢你的回复。
@Himadri - 你为什么要让它更复杂？
贾斯汀 - 你是对的，没有必要。只是想举一个简单的例子。
@Himadri：这里的方法使用纯 CSS，您可以将其包含在页面上。您甚至可以将这些样式规则直接添加到图像对象（尽管我建议改用上述方法）：

【解决方案2】：

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

【讨论】：

使用 asp.net ajax 或 javascript 代替 JQuery 还有其他出路吗？谢谢你的帖子。

【解决方案3】：

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

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

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

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

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

【讨论】：

我对这个答案很着迷，因为我以前从未听说过“lowsrc”属性。我进行了谷歌搜索并发现了这个：blog.throbs.net/2009/05/27/Hey+JLo+Where+Did+LowSRC+Go.aspx 似乎声明“lowsrc”已被弃用一段时间。我为“lowsrc”找到的唯一来源/页面非常古老。我也无法使用任何页面进行测试（并且实际上看到了 lowsrc 的运行情况）。也许我的连接太快了。
从我的网上搜索来看，这个属性似乎可以通过使用 javascript 被黑客入侵。如果您通过validator.w3.org 运行带有图像lowsrc 属性的html 源代码，它将显示'lowsrc' 不是有效属性。
好吧，让我失望。我自己没用过，只是听说过。
我收到了 html 错误“lowsrc”不是元素“img”的有效属性，使用它看不出任何区别。
@himadri ya，@jim 是这么说的

【解决方案4】：

这是一种基本技术，您可以扩展它来做更复杂的事情

<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>

【讨论】：

答案绝对值得。工作和解释得很好。

【解决方案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 函数中做一些额外的事情。就我而言，我根据其大小拉伸了图像的宽度、高度或两者。

【讨论】：