javascript - 为什么我的图像加载不在 Firefox 和 Internet Explorer 中触发？

Question

我正在尝试使用解决方案 found here 来检测几张图片何时完成加载

该解决方案在 Chrome 和 Safari 中运行良好，但在 Firefox 和 IE 中均失败(无错误)。

预加载函数如下:

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。加载完所有图片后，我的 slider 控件将被告知淡入。

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://foo.bar/content/user_files/2014/08/test-2.png

 http://foo.bar/content/user_files/2014/08/test-1.png

我尝试了一些其他解决方案 in the thread linked above但似乎都没有用。我尝试了 jQuery 解决方案，在设置实际源之前设置 img.src = ''; 但没有任何反应。

感谢任何帮助。

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

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

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

Answer 1

Firefox 正在崩溃，因为代码行:

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

返回带引号的 URL:

url("https://i.imgur.com/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/%22https://i.imgur.com/S1OPVB6.jpg%22

解决方案是使用正则表达式去除 Firefox 中的 "，但不去除 Chrome 中的 ":

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

如图所示:

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

这在 Chrome 和 Firefox 中都可以正常工作!