Question

我使用以下脚本在mouse over小图像上显示大图像（示例照片附在最后）。我想在从服务器下载大图像时显示“加载”图像（如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>

enter image description here

Answer 1

图片有加载事件。只要在设置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数组中的所有图像预先加载并在网页的生命周期中立即可用，从而防止在等待加载图像时任何用户延迟。显然，预加载的图像实际上加载的时间很短，但对于通常在用户与网页交互之前发生的小图像，这样可以更快地感受到使用图像的网页的动态部分。

Answer 2

<img id=access src=loading.gif>

<script>
window.onload=function(){

document.getElementById('access').src='access.jpg';

}
</script>

希望这有帮助。

想要在图像下载期间显示“加载”图像 - Javascript

2 个答案: