我使用以下脚本在鼠标悬停小图像上显示大图像(最后附上的示例照片)。我想在从服务器下载大图像时显示“正在加载”图像(如 this )。如何才能实现这一目标？
注意:我问过类似的问题here但我没有成功地将 append 函数应用到以下代码。请帮忙。
<script type="text/javascript">
function showIt(imgsrc)
{
var holder = document.getElementById('imageshow');
var newpic= new Image();
newpic.src=imgsrc;
holder.src=imgsrc;
holder.width = newpic.width;
holder.height=newpic.height;
}
</script>
<body>
/***on hover, xyz.jpg will be replaced by bigA.jpg and so on***/
<img src="smallA.jpg" onMouseOver="showIt('bigA.jpg')"/>
<img src="smallB.jpg" onMouseOver="showIt('bigB.jpg')"/>
<img src="xyz.jpg" id="imageshow" />
</body>
最佳答案
图像有一个加载事件。只要在设置 image.src 之前设置加载处理程序，当图像已成功加载或加载时遇到某种错误时，您应该会收到通知。我在我写的幻灯片中做了同样的事情，这样我就知道下一张图像何时准备好显示，并且如果图像比指定的时间延迟了一秒以上，我会显示一个等待光标(如您想要的动画 gif)显示时间，以便用户知道发生了什么。
一般来说，你可以这样做:
function loadImage(url, successHandler, errorHandler) {
var myImg = new Image();
myImg.onload = myLoadHandler; // universally supported
myImg.onabort = myErrorHandler; // only supported in some browsers, but no harm in listening for it
myImg.onerror = myErrorHandler;
myImg.src = url;
function myLoadHandler() {
successHandler(myImg, url);
}
function myErrorHandler() {
if (errorHandler) {
errorHandler(url);
}
}
}
使用这样的代码，您可以在启动图像加载时显示等待光标，并在调用 successHandler 时隐藏它。
如果这些事件还有任何其他监听器，那么您应该使用 addEventListener 或 AttachEvent 而不是 onload、onabort、onerror，但如果只有一个监听器，则可以采用任一方法。
如果预先知道所需的图像，那么有时预加载稍后可能使用的图像会带来更好的用户体验(更少的等待)。这会将它们放入浏览器的内存缓存中，以便在需要时它们会立即出现。可以用 HTML 或 JS 预加载图像。在 HTML 中，只需将标签插入网页中所有所需图像(但用 CSS 隐藏它们)。在 JS 中，只需创建一个图像数组并创建图像对象:
// image URLs to preload
var preloadImageURLs = [
"http://photos.smugmug.com/935492456_5tur7-M.jpg",
"http://photos.smugmug.com/835492456_968nf-M.jpg",
"http://photos.smugmug.com/735492456_3kg86-M.jpg",
];
var preloads = []; // storage for preloaded images
function preloadImages() {
var img, i;
for (i = 0; i < preloadImageURLs.length; i++) {
img = new Image();
img.src = preloadImageURLs[i];
preloads.push(img);
}
}
这将导致 preloadImageURLs 数组中的所有图像被预加载，并在网页的生命周期中立即可用，从而防止用户在等待图像加载时出现任何延迟。显然，预加载的图像实际加载的时间很短，但对于小图像来说，通常发生在用户与网页交互之前，因此可以更快地感受到网页中使用图像的动态部分。
关于php - 想要在图像下载过程中显示 “loading” 图像 - Javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6866077/