Question

我希望徽标图像能够在小型和大型之间进行响应性更改。这是我的代码：

v.checkIfMobile = function() {
    var newIsMobile = window.matchMedia("(max-width: 60em)").matches;
    var valueToReturn = (v.isMobile != newIsMobile);
    v.isMobile = newIsMobile;
    return valueToReturn;
}

v.responsiveAdjust = function() {
    console.log("will now check mobile status");
    if(v.checkIfMobile()) {
        console.log("mobile status changed");
        var src = "local/images/logo"
            + (v.isMobile ? "Mobile" : "Desktop") + ".png";
        $("#logo").attr("src", src);
        console.log("src should have changed");
    }
}

v.responsiveAdjust();
$(window).on("orientationchange", v.responsiveAdjust);
$(window).resize(v.responsiveAdjust);

几乎每一次，来源根本就没有变化，但是一次或两次重新加载页面就做到了。我在命令之后立即设置断点并没有任何区别。我已经使用了prop和attr，并且我知道由于控制台消息而正在处理代码。

最后，当我在页面加载后将相关代码输入控制台时，它会按预期工作。可能会有竞争条件吗？这很奇怪，因为src属性的实际文本没有改变（直到我进行控制台输入或者除非我很幸运），这听起来并不像时间的影响需要加载图像。

我该怎么办？

使用jQuery更改图像src是偶然的

0 个答案: