在使用jQuery执行某些操作之前确保已加载图像

Question

我的应用上有一个图库。有很多缩略图fadeOut为新的缩略图腾出空间。我知道我可以在另一个div上预加载它，设置超时然后将缩略图src更改为预加载的。但是，它并不能保证图像会被加载，对吧？ 现在，我这样做：

var img = $('<img />');
img.attr('src','path/to/img');

img.on('load',function(){
    // change the src
    // fadeOut
    // fadeIn
});

它似乎有效，但我有一些问题：

1. 即使请求的网址以404响应
，它仍会有效吗？
2. 我已设置超时以每3秒运行一次。不好吗？
3. 我不知道JavaScript的工作原理，因此，在每次执行此代码时创建一个新的 img 元素会给我带来一些麻烦吗？我很担心，因为我不知道这是否会堆放在某处（此代码可以运行数小时）。

Answer 1

1. 您可以使用jQuery的.fail（）功能。 E.g：

   img.on('load', function() {
       // do your stuff here
   })
   .fail(function() {
       // whatever you want to do here
   });
   

2. 这取决于JS引擎。较旧的IE有泄漏。但是在超时完成后，它就完成了。所以我在这里看不出任何坏事。现代的应用程序/网页运行了很多脚本，一点点超时都没有坏处。

3. 我删除了未使用的img-elements。否则你可能会破坏DOM。