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

【问题标题】：Show ajax loader image until an actual image is loaded显示 ajax 加载器图像，直到加载实际图像
【发布时间】：2010-02-28 22:58:14
【问题描述】：

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

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

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

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

谢谢。

【问题讨论】：

您是否有权访问此应用的服务器？还是图片来自某个外部网站？

标签： jquery

【解决方案1】：

不知道 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>

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

【讨论】：

是的，但是当图像完成加载时会触发该事件。但我试图摆脱用户点击缩略图和页面上显示新图像之间的停顿（它开始出现需要几秒钟）。
这正是您想要的不是吗？您的问题转述：检测图像何时完成加载，以便同时显示微调器。

【解决方案2】：

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

【讨论】：

【解决方案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);

【讨论】：

无需使用 setTimeout 进行轮询。有一个 DOM 标准，您可以收听图像的 corss-bowser onload 事件。

【解决方案4】：

onload 在图像实际加载到 firefox 之前触发......

编辑：多么令人尴尬，使用 onload 和“正确”的 javascript 让它工作。哦！

【讨论】：