使用javascript更新图像src将附加到根目录

Question

我正在使用HTML中的内联样式加载一个小文件大小，低分辨率的背景图像，然后使用jQuery加载高分辨率版本来替换它。 JavaScript使用正则表达式获取低分辨率图像网址，将网址编辑为高分辨率版本，然后：

JS

// Get low res url
...
// Edit low res url to high res url
var highResSrc = lowResSrc.replace(changeUrlRegex, '');
console.log("high res src " + highResSrc);

if (window.matchMedia("(min-width: 700px)").matches) {
    console.log("Media match success");

    var img = new Image();
    console.log("new image created " + img.src);

    $(img).attr("src", highResSrc);
    console.log("img source set " + img.src);

    // After high res image has (pre)loaded, replace low res with it
    $(img).load(function() {
        console.log("img loaded");

        theDiv.css("background-image", "url(" + highResSrc + ")");
        console.log("div css changed");
    });
}

下面显示的是预期行为（Edge）：

（不知道为什么会有404，但你可以忽略它）

IE11（更新：和Firefox 40）尝试将新的高分辨率src附加到根目录：

因此高分辨率图像无法加载。

这是一个并排比较：

Answer 1

正如Lister先生所指出的，问题是一些浏览器在高分辨率src字符串周围加上引号。简单修复：

// If browser has put quotes around the high res src, remove the quotes
var removeQuotesRegex = /"(.*)"/;
if (removeQuotesRegex.test(highResBackgroundSrc)) {
    highResBackgroundSrc = highResBackgroundSrc.match(removeQuotesRegex)[1];
    console.log("high res src quotes removed " + highResBackgroundSrc);
} else {
    // No quotes to remove - do nothing
}