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

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

我需要实现该功能。

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

请帮忙。

2009-10-14 Himadri

这是一个基本的技术，您可以在扩大与

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

来源

2009-11-02 16:02:05

绝对值得赏金的答案。工作和解释得很好。 – matm 2011-05-24 10:08:31

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

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

CSS：

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

来源

2009-10-14 05:07:54 NinjaBomb

包装div不是必需的。您可以将背景应用于图像。此外，如果图像是透明的，加载图像将在 – 2009-10-14 06:46:39

下方可见。是否有任何其他出路使用asp.net ajax或简单的JavaScript nto JQuery。请帮忙。 Thaks回复你。 – Himadri 2009-10-14 10:03:14

@Himadri - 为什么你想让它更复杂？ – Skilldrick 2009-10-14 11:38:52

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

来源

2009-10-14 05:16:23

是否有任何其他出路使用asp.net ajax或JavaScript而不是JQuery？感谢您的职位。 – Himadri 2009-10-14 06:00:59

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

没有JavaScript或CSS是必要的。只需使用img元素的内置但很少听到的lowsrc属性。

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

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

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

来源

2009-10-14 06:43:52

我希望我能给这更多upvotes。 – eyelidlessness 2009-10-14 06:45:17

我对这个答案很着迷，因为我从来没有听说过'lowsrc'属性。我做了谷歌搜索，并遇到了这个：http://blog.throbs.net/2009/05/27/Hey+JLo+Where+Did+LowSRC+Go.aspx它似乎声明，'lowsrc'已被弃用一会儿。我发现'lowsrc'的唯一来源/页面非常古老。我也无法使用任何页面进行测试（并且实际上看到了lowsrc的实际运行情况）。也许我的连接太快了。 – Jim 2009-10-14 06:59:47

从我在网上搜索，似乎这个属性可以通过使用JavaScript黑客入侵。如果通过http://validator.w3.org/运行带有image lowsrc属性的html源代码，它将显示'lowsrc'不是有效的属性。 – Jim 2009-10-14 07:16:26

前段时间我做了这样的事情了类似的问题做更精细的东西：

<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函数中做一些额外的事情。在我的情况下，我根据其尺寸拉伸图像的宽度，高度或两者。

来源

2009-11-04 17:42:43 sinuhepop

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

回答

相关问题