Question

我有一个jQuery脚本，可以在加载原始图像后隐藏加载动画。这是HTML代码：

<img id="loading_img" src="loading.gif">
<img id="q" style="display: none;" src="abc.png"/>

这是javascript：

$('#q').load(function(){
    $('#loading_img').hide();
    $('#q').show();
});

但问题是，加载图像不会在100％的时间内隐藏。有时它会停留，原始图像不会出现。我尝试改变位置（原始图像然后加载图像）但没有发生任何事情。我应该怎么做才能使代码每次都有效？

Answer 1

加载事件不会触发大多数浏览器中隐藏的图像：

<img id="loading_img" src="loading.gif">
<img id="q" style="display: none;" src="abc.png"/>

您必须在javascript中创建一个新图像，并在该图像上侦听加载事件：

var img = new Image();
img.onload = function() {
    document.getElementById('loading_img').style.display = 'none';
    document.getElementById('q').style.display = 'inline';
}
img.src = document.getElementById('q').src;
if (img.complete) img.onload();

或更多jQuery'ish

$(new Image()).on('load', function() {
   $('#loading_img').hide();
   $('#q').show();
}).prop('src', $('#q').prop('src'))
  .each(function() { if (this.complete) $(this).trigger('load');})

加载图像后隐藏加载动画

1 个答案: