Javascript函数适用于chrome和safari但在Firefox

时间:2015-08-03 17:38:43

标签: javascript jquery firefox

我有一个脚本从api获取配置文件图片,然后调用一个插件将它们组织成一个网格。该插件有很多动画类型,所以我创建了一个重新加载它并设置新动画的函数。

该插件在li

中查找img标签
<li><a href="#"><img src="http://static-cdn.jtvnw.net/jtv_user_pictures/ultimatekingpotato-profile_image-ae8563aeda4ee1c4-300x300.jpeg"/></a></li>

然后将它们转换为具有背景的样式。

<a style="background-image: url('http://static-cdn.jtvnw.net/jtv_user_pictures/mathruppenthal-profile_image-8057144b43c310c1-300x300.png'); cursor: default;" id="0" href="#"></a> 

当我从api获取图像时,我将它们作为img标签加载,然后插件转换。要重新加载插件,我克隆并将图像转换回普通标签,以便插件可以使用新动画重新开始。

这在Chrome和Safari中运行良好,但它只是在Firefox中突破(当我在选择上更改动画时)并且我得到了错误

GET 
http://localhost:3000/grid/%22http://static-cdn.jtvnw.net/jtv_user_pictures/wooodus-profile_image-f70bb3ae646de522-300x300.jpeg%22

我不知道从哪里获取服务器路径并执行此操作?我已在此处上传了一个示例,因此您可以看到它在Chrome中有效但在FF中它会破坏所有图像http://178.79.171.188/grid/

以下是导致此问题的选择的代码

$("#animselect select").change(function(){
    var Grid = $("#twitch-grid-preview").clone();
    $("#twitch-grid-preview").html("").replaceWith(Grid);
    var anchor = $("#twitch-grid-preview").children('ul').find('a');
    anchor.each(function() {

        var bg = $(this).css('background-image');
        bg = bg.replace('url(', '').replace(')', '');
        $(this).parent().append('<a href="#"><img  /></a>');
        $(this).parent().find('a img').attr( 'src' , bg );
        $(this).remove();
    });
    var animPreview = $('#animselect select').val().toLowerCase();
    var clones = $('ul#gridList li').clone();
    $('ul#gridList').append(clones);

    $('#twitch-grid-preview').gridrotator( {
        animType: animPreview,

    });
}); 

1 个答案:

答案 0 :(得分:2)

在firefox中使用.css("background-image")会返回:

"url("URL_PATH")"

而其他浏览器可能会返回此

"url(URL_PATH)"

所以你的问题出现在第一种情况下,你将图像网址设置为:

<img src=""YOUR_URL"">

要解决此问题,您可以在此行中添加替换:

bg = bg.replace('url(', '').replace(')', '').replace(/"/g, '');