这是在Javascript / Jquery（带有动画）中预加载图像的正确方法吗？

Question

我正在尝试在HTML图片加载时显示基本动画。

这是正确的方法吗？

      //display the (small image) animation
      var preloader = new Image();
      preloader.src = 'img/preload.gif';
      $('#myDiv').append(preloader);

      //load big image and hide peload animation when finished
      var img = new Image();
      img.onload = function () { $(preloader).hide(); preloader = null; } ;
      img.src = 'img/bigImage.jpg';
      $('#myDiv').append(img);

我不确定这是否正确：尽管小动画可以在我的浏览器中使用，但始终会加载小动画，即使大图像已经加载并且位于缓存中也是如此。 有没有一种方法可以停用此功能，或者可以考虑使用另一种方法来处理带有小动画的图像预加载？

谢谢

Answer 1

这是我的处理方式：

var preloader = new Image(),
    img       = new Image(),
    div       = document.getElementById('myDiv');

img.onload = function () {
    preloader = null; 
    div.innerHTML = '';
    div.appendChild(this);
};

img.src = 'img/bigImage.jpg';

// if it's not in cache or not loaded (has no size), show the preloader
if (! (img.complete || img.width+img.height > 0) ) {
    preloader.src = 'img/preload.gif';
    div.innerHTML = '';
    div.appendChild(preloader);
}