Question

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

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

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

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

感谢。

Answer 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，以防您担心。

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);

Answer 4

无论如何，

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

编辑：如何使用onload和“正确的”javascript让它变得尴尬。 D'哦！

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

4 个答案: