显示ajax加载程序图像，直到加载实际图像

因此，我有一个页面，上面有小图片缩略图，页面中间有一个大的区域用于放大照片。显示ajax加载程序图像，直到加载实际图像

当用户点击缩略图时，页面中间会显示一幅全尺寸的图片。我只是改变了图像的src属性在这样的中间以实现：

$('img#fullsize').attr('src', path); // path is built earlier in the jQuery code

的问题是，当全尺寸图像太大它的作用是在中间的全尺寸图像消失并没有什么直到新的全尺寸图像开始加载（有时可能需要cca 5秒直到新图像在高峰时间开始加载）。我想要的是显示一个ajax加载器gif图像，直到fullsize照片开始加载。我怎样才能做到这一点？

谢谢。

来源

2010-01-03 Richard Knop

你有访问这个应用程序的服务器吗？或者图像来自某个外部网站？ – 2010-01-03 21:25:38

我可以访问服务器。 – 2010-01-03 21:43:36

不知道jQuery，但<img>有一个onload事件。你可以做的是

设置所显示的图像的src到加载微调GIF，然后
负载的实际图像到一个隐藏img，
一旦onload事件触发交换了src各地：

代码：

<!-- preload spinner gif: --> 
<img src="loading_spinner.gif" style="display:none" /> 

<!-- img placeholders: --> 
<img src="" id="fullsize" /> 
<img src="" id="hidden_img" style="display:none" /> 

<a href="javascript:loadFullSize()">Click here to load image</a> 

<!-- load image: --> 
<script> 
    function loadFullSize() { 
    function get (id) {return document.getElementsById(id)} 

    var visible = get('fullsize'); 
    visible.src = 'loading_spinner.gif'; 

    var hidden = get('hidden_img); 
    hidden.src = path; 

    hidden.onload = function(){ 
     visible.src = path; 
    } 
    } 
</script>

如果你担心这个问题，你可以预先加载spinner gif。

来源

2010-01-03 21:30:05 slebetman

是的，但是当图像加载完成时触发该事件。但是我试图摆脱用户点击缩略图和新图像星星显示在页面之间（需要几秒钟直到它开始出现）之间的停顿。 – 2010-01-03 22:08:13

这正是你想要的不是吗？您的问题解释为：检测图像何时装载完成，以便同时显示微调器。 – slebetman 2010-01-03 23:47:40

没有实际的代码只是一个简短的想法：怎么样为您的图像定义一个CSS背景？除了透明图像之外应该工作（你将不得不在后面删除这些背景） - 但实际上：我还没有尝试过。

来源

2010-01-03 21:20:36

加载图像可能会非常棘手。一个合理的跨浏览器的方法来检查，如果图像被加载是检查完整PARAM天然图像对象上和宽度大于0

像这样应该工作：

var img = $('img#fullsize').attr('src', path)[0]; 

window.setTimeout(function() { 
    if (img.complete && img.width) { 
     console.log('loaded!'); 
    } 
    window.setTimeout(arguments.callee, 1); 
}, 1);

来源

2010-01-03 22:25:45 David

无需使用setTimeout进行轮询。有一个DOM标准，可以收听图像的corss-bowser onload事件。 – slebetman 2010-01-03 23:48:40

的onload在图像实际加载到Firefox之前发生的火灾......

编辑：如何尴尬，让它工作使用onload和“适当”的JavaScript。 D'哦！

来源

2010-02-28 14:44:46

显示ajax加载程序图像，直到加载实际图像

回答

相关问题