Javascript函数在chrome和safari中工作,但在Firefox中中断
我有一个脚本,它从一个api获取配置文件图片,然后调用一个插件将它们组织到一个网格中。这个插件有很多动画类型,所以我制作了一个函数来重新加载它并设置新的动画 该插件在li中查找img标记Javascript函数在chrome和safari中工作,但在Firefox中中断,javascript,jquery,firefox,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"/>&
<li><a href="#"><img src="http://static-cdn.jtvnw.net/jtv_user_pictures/ultimatekingpotato-profile_image-ae8563aeda4ee1c4-300x300.jpeg"/></a></li>
我不确定它从哪里获取服务器路径并执行此操作?我在这里上传了一个例子,所以你可以看到它在chrome中工作,但在FF中它破坏了所有的图像
以下是导致此问题的select的代码
$("#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,
});
});
在firefox中使用.cssbackground图像将返回以下内容:
"url("URL_PATH")"
而其他浏览器可能会返回此消息
"url(URL_PATH)"
因此,您的问题出现在第一种情况下,您将图像url设置为:
<img src=""YOUR_URL"">
我刚刚在Firefox中运行了它,它运行得很好。运行Firefox v39.0。引号%22与此有关吗?也许你只需要像在OS X上的Firefox v38.0.5一样对图像url进行url编码,效果也不错。当你说它会打断所有图像时-你指的是初始加载,对吗?不,它会在更改动画时打断。我在mac上使用FF v39。这是一张图片,显示了当选择更改时,您应该发布代码的问题。太棒了!这就解决了问题。非常感谢,我已经绞尽脑汁好几个小时了!
"url(URL_PATH)"
<img src=""YOUR_URL"">
bg = bg.replace('url(', '').replace(')', '').replace(/"/g, '');