如何在加载大图像时显示加载图像?
如何在加载大图像时显示加载图像?如何在加载大图像时显示加载图像?
作为Orkut在用户相册中查看照片时的示例,在照片完全加载之前,会在照片上显示加载图像。
我需要实现该功能。
我的问题是如何实现该功能? 是否可以不使用JQuery?
请帮忙。
这是一个基本的技术,您可以在扩大与
<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>
用div(或任何你想要的)包裹你的图像,并将其背景图像设置为动画gif或任何你想要的加载图像。当图像加载完成后,它会掩盖背景图像。容易,可以在任何你想要的地方重复使用。
<div class="loading">
<img src="bigimage.jpg" alt="test" />
</div>
CSS:
.loading{
background:transparent url(loadinggif.gif) center center no-repeat;
}
包装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。它允许您指定加载图像并延迟加载大图像,直到它们滚动到视图中。
是否有任何其他出路使用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
我希望我能给这更多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函数中做一些额外的事情。在我的情况下,我根据其尺寸拉伸图像的宽度,高度或两者。
绝对值得赏金的答案。工作和解释得很好。 – matm 2011-05-24 10:08:31