想要在图像下载过程中显示“loading”图像 - Javascript

问题描述：

我使用以下脚本在mouse over上显示大图像（最后附上示例照片）。我想在从服务器下载大图像时显示“加载”图像（如this）。这怎么能实现？想要在图像下载过程中显示“loading”图像 - Javascript

注意：我也问过类似的问题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

答

图像具有加载事件。只要您在设置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阵列中进行预装，并可以立即后来在网页的使用寿命，从而防止任何用户在等待图像加载时延迟。显然，预加载的图像实际上可以加载的时间很短，但是对于通常在用户与网页交互之前发生的小图像，因此对于使用图像的网页的动态部分来说更快。

答

<img id=access src=loading.gif> 

<script> 
window.onload=function(){ 

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

} 
</script>

希望这会有所帮助。

想要在图像下载过程中显示“loading”图像 - Javascript

相关推荐