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

【问题标题】：Want to show “loading” image during the image download - Javascript想要在图像下载期间显示“加载”图像 - Javascript
【发布时间】：2011-07-28 21:39:50
【问题描述】：

我正在使用以下脚本在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>

【问题讨论】：

标签： php javascript html web-applications

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

【讨论】：

【解决方案2】：

<img id=access src=loading.gif>

<script>
window.onload=function(){

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

}
</script>

希望这会有所帮助。

【讨论】：