Question

这是我的脚本。它目前适用于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，＆＃34;＆＃34;）有关，但我无法弄清楚如何让它在都。对于发生了什么有任何想法？

当我把它们混合在一起时：

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

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

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

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

.replace（）在Firefox中工作

1 个答案: