为什么我的图像onload没有在Firefox和Internet Explorer中触发？

我正在尝试使用此处找到的解决方案检测何时完成一些图像加载

该解决方案在Chrome和Safari中运行得非常好，但在Firefox和IE中都失败了（没有错误）。

预加载function如下：

var preloadPictures = function(pictureUrls, callback) { var i, j, loaded = 0; for (i = 0, j = pictureUrls.length; i < j; i++) { (function (img, src) { img.onload = function () { if (++loaded == pictureUrls.length && callback) { callback(); } }; img.src = src; } (new Image(), pictureUrls[i])); } }; 

我通过从几个div的背景图像创建一个数组来使用它。 文档准备好后，将调用函数loadSlides 。 加载完所有图片后，我的滑块控件会被告知淡入。

 function loadSlides() { if( jQuery('#frontpage-slider')[0] ) { var pictures = []; jQuery('#frontpage-slider .slide').each(function() { var bg = $(this).css('background-image'); bg = bg.replace('url(','').replace(')',''); pictures.push( bg ); }); preloadPictures( pictures, function() { jQuery('.slide-controls').css('visibility','visible').hide().fadeIn('slow'); } ); } } 

如果我警告pictures变量我得到一个具有以下值的数组，所以我不认为我的问题与值有关。

  http://sofzh.miximages.com/javascript/test-2.png http://sofzh.miximages.com/javascript/test-1.png 

我在上面链接的线程中尝试了一些其他解决方案，但似乎都没有。 我尝试了jQuery解决方案，设置img.src = ''; 在设置实际来源之前，但没有任何反应。

任何帮助表示赞赏。

编辑：我创建了以下jsfiddle： http ： //jsfiddle.net/yuaond6b/2/

我在该脚本中遇到了同样的问题，因为它适用于Chrome，但在Firefox中没有任何function。 我不得不修改脚本因为某些原因jsfiddle不喜欢我的变量函数，但结果是一样的。

编辑2：如果我向我的img添加“onerror”函数，它会被触发。 不幸的是，我试图从这些错误中提取消息，似乎无法弄清楚它是如何工作的。

Answer 1

Firefox正在破解，因为代码行：

 var bg = jQuery(this).css('background-image'); 

返回带引号的url：

 url("http://sofzh.miximages.com/javascript/fTb97EO.jpg") 

而在Chrome中，它返回它没有引号：

 url(https://i.imgur.com/fTb97EO.jpg) 

然后您删除在Chrome中工作正常的url（和），但这意味着在Firefox中字符串bg周围有额外的引号。 这意味着当您设置src属性时，Firefox会将这些额外的引号转换为％22，然后无法识别URL并尝试加载本地路径。 以下是Firefox在jsfiddle中运行时尝试加载的内容：

 http://fiddle.jshell.net/yuaond6b/4/show/%22http://sofzh.miximages.com/javascript/S1OPVB6.jpg%22 

解决方案是使用正则表达式删除“在Firefox中，但不在Chrome中”：

 bg = bg.replace(/url\(["]*/,'').replace(/["]*\)/,''); 

如下图所示：

 http://jsfiddle.net/yuaond6b/6/ 

这在Chrome和Firefox中都可以正常使用！