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。加载完所有照片后，我会告诉滑块的控件淡入。

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("https://i.imgur.com/fTb97EO.jpg")

而在Chrome中，它会返回它而不带引号：

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

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

http://fiddle.jshell.net/yuaond6b/4/show/%22https://i.imgur.com/S1OPVB6.jpg%22

解决方案是剥离＆＃34;在Firefox中，但不是在Chrome中，使用正则表达式：

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

如下所示：

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

这适用于Chrome和Firefox！

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

1 个答案: