为什么我的图像onload没有在Firefox和Internet Explorer中触发？ [英] Why is my image onload not firing in Firefox and Internet Explorer?

问题描述

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

I'm trying to detect when a few images are done loading using the solution found here

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

The solution works wonderfully in Chrome and Safari but fails (without error) in both Firefox and 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 。加载所有图片后，我的滑块控件会被告知淡入。

And I use it by creating an array from the background images of a few divs. The function loadSlides is called when the document is ready. Once all pictures are loaded my slider's controls are told to fade in.

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');
        } );
    }
}

如果我提醒图片变量我得到一个具有以下值的数组，所以我认为我的问题与这些值没有任何关系。

If I alert the pictures variable I get an array with the following values so I don't think my problem has anything to do with the values.

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

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

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

I tried a few other solutions in the thread linked above but none seem to have worked. I tried the jQuery solution, setting img.src = ''; prior to setting the actual source but nothing happens.

感谢任何帮助。

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

I created the following jsfiddle: http://jsfiddle.net/yuaond6b/2/

我遇到与该脚本相同的问题，因为它适用于Chrome但在Firefox中什么都不做。我不得不修改脚本，因为jsfiddle不喜欢我的变量函数，但结果是一样的。

I get the same problem with that script as it works in Chrome but does nothing in Firefox. I had to modify the script as for some reason jsfiddle didn't like my variable function but the result is the same.

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

Edit 2: If I add an "onerror" function to my img it gets triggered. Unfortunately I've tried to extract the message from these errors and can't seem to figure out exactly how it works.

推荐答案

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

Firefox is breaking because the line of code:

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

返回带引号的网址：

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

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

whereas in Chrome it returns it without quotes:

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

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

You then strip the url( and the ) which works fine in Chrome, but it means in Firefox the string bg has additional quotes around it. This means when you set the src attribute, Firefox converts those extra quotes to %22 and then doesn't recognise the URL and attempts to load a local path. Here is what Firefox tries to load when run in jsfiddle:

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

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

The solution is to strip the " in Firefox, but not in Chrome, using a regexp:

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

如下所示：

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

Chrome和Firefox都可以正常使用！

This works OK in both Chrome and Firefox!

这篇关于为什么我的图像onload没有在Firefox和Internet Explorer中触发？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！