jquery - 显示 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周围:

代码:

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