Javascript 加载图像后隐藏加载动画

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

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

---

但问题是，加载的图像并不是100%隐藏的。有时它会停留，而原始图像不会出现。我试图改变位置（原始图像，然后加载图像），但什么也没发生。如何使代码每次都能正常工作？

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

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

或者更像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');})

---

我是新的是jQuery，请您编辑您的代码以便我可以使用？当前的一个不起作用。jQuery版本不能正常工作，对此进行了编辑。希望我能为

$（new Image（））

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

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