[英]How to show loading image when a big image is being loaded?
如何在加载大图像时显示加载图像？
作为在Orkut中查看用户相册中的照片的示例，在照片完全加载之前，在照片上显示加载图像。
我需要实现该功能。
我的问题是如何实现该功能？ 是否可以不使用JQuery？
请帮忙。
将您的图像包裹在div（或任何您想要的）中，并将其背景图像设置为动画gif或您想要的任何加载图像。 当图像完成加载时，它将覆盖背景图像。 简单，可以在任何地方重复使用。
<div class="loading">
<img src="bigimage.jpg" alt="test" />
</div>
CSS：
.loading{
background:transparent url(loadinggif.gif) center center no-repeat;
}
这是一个基本技术，你可以扩展，以做更多精心设计的东西
<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>
编辑：显然，这已被弃用。 这里没什么好看的，离开。
这不需要JavaScript或CSS。 只需使用img元素的内置但很少听到的lowsrc属性。
<img src="giant-image.jpg" lowsrc="giant-image-lowsrc.gif">
基本思想是您创建一个额外的非常压缩，可能是正常图像的黑白版本。 它首先被加载，当下载全分辨率图像时，浏览器会自动替换它。 最好的部分是你不必做任何事情。
请在此处查看： http ： //www.htmlcodetutorial.com/images/_IMG_LOWSRC.html
您可以使用jQuery Lazy Loading插件 。 它允许您指定加载图像并延迟加载大图像，直到它们滚动到视图中。
前一段时间我为类似的问题做了类似的事情：
<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);'/>
我认为这种方法有一些有用的优点：
当我通过正常请求加载大内容时，有什么方法可以显示加载图像（如ajax loading gif）？
[英]Is there any way to show a loading image (like ajax loading gif) when I load big content with a normal request?
将数据加载到GridView时如何在gmail中显示Loader图像？
[英]How to show the Loader image like in gmail when loading Data into GridView?
ASP.NET：当页面执行存储过程时，如何显示加载图像？
[英]ASP.NET: How can I show a loading image when my page performs stored procedure?
如何在下拉更改事件（SelectedIndexChange）上显示加载图像
[英]How to show loading image on dropdown change event(SelectedIndexChange)
如何在实际发送到服务器之前显示正在上载的图像的预览
[英]How to show preview of image being uploaded before actually sending it to server
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.