显示ajax加载器图像，直到加载了实际图像

Question

所以我有一个带有小图片缩略图的页面，页面中间有一个很大的区域用于全尺寸照片。

当用户单击缩略图时，页面中间会显示一张全尺寸的图片。我只需更改中间图像的src属性即可实现此目的：

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

问题是，当全尺寸镜像太大时，中间的全尺寸镜像会消失，直到新的全尺寸镜像开始加载之前什么都没有(在高峰时段，有时cca需要5秒才能开始加载新镜像)。我想要的是显示一个ajax加载器gif图像，直到全尺寸的照片开始加载。我该怎么做呢？

谢谢。

Answer 1

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

1. 将显示图像的src设置为加载微调器gif，然后
2. 将实际图像加载到隐藏的img中，
3. 一旦onload事件触发，就交换周围的src：

G213

代码：

<!-- 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>

您可以预加载微调器gif，以防您担心这一点。

Answer 2

没有实际的代码，只有一个简短的想法:为你的图像定义一个css背景怎么样？应该可以工作，除了透明的图像(你必须稍后删除这些背景)-但实际上:我还没有尝试过。

Answer 3

加载图像可能会很棘手。跨浏览器检查图像是否已加载的一种合理方法是检查本机image对象上的完整参数，并且宽度大于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);