.replace() 在 Firefox 中工作答案

【问题标题】：.replace() to Work in Firefox.replace() 在 Firefox 中工作
【发布时间】：2015-08-12 20:35:40
【问题描述】：

这是我的脚本。它目前适用于 Chrome，但不适用于 Firefox。

var img = new Image();
img.src = $('.header-image').css('background-image').replace(/url\(|\)$/ig, "");
var bgImgWidth = img.width;
var bgImgHeight = img.height;

var imageRatio = bgImgHeight / bgImgWidth;
var boxWidth = $(window).width();
var imageHeight = imageRatio * boxWidth;

$(img).load(function () {
  $('.header-image').css('height', imageHeight);
});

$(window).resize(function() {
  var newImageWidth = imageRatio * $(window).width();
  $('.header-image').css('height', newImageWidth);
});

我认为它与 .replace(/url(|)$/ig, "") 有关，但我不知道如何让它在两者中都起作用。知道发生了什么吗？

当我把这些混在一起时：

alert( img.src );
console.log($('.header-image').css('background-image'));

第一个返回url，第二个返回

url(http://example.com/path/to/photo.jpg)

【问题讨论】：

$('.header-image').css('background-image') 返回什么？
url$|$$ 匹配任意位置的url( 或字符串末尾的)。这真的是你所期望的吗？是不是少了一个分号？
关于缺少的分号，这是我从别人那里复制的，所以我不确定。我已经在问题中发布了返回值。
第二个警报没有帮助，因为选择器错误。最好使用控制台进行调试而不是警报。
此外，问题的最可能原因是图像尺寸在图像加载之前不可用。您应该在负载处理程序中移动这些计算。

标签： javascript jquery css google-chrome firefox

【解决方案1】：

修复它。将正则表达式清理为：

      img.src = $('.header-image').css('background-image').replace(/(^url\()|(\)$|[\"\'])/g, '');

然后将整个函数包装在 .load 中

  var $div = $('.header-image'),
  bg = $div.css('background-image');

  if (bg) {
    var src = bg.replace(/(^url\()|(\)$|[\"\'])/g, ''),
    $img = $('<img>').attr('src', src).on('load', function() {
      // MY FUNCTION HERE
    });
  }

【讨论】：