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)
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)
编辑:显然,这已被弃用。这里没什么好看的,离开。
为此不需要 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
| 归档时间: |
|
| 查看次数: |
3725 次 |
| 最近记录: |