jQuery能否在加载图像之前更改图像路径？

我正在建立一个网站，将在本地运行的平板电脑上，客户正在给新的业务前景。因此，我不能使用任何PHP。这种设计需要我根据平板电脑的方向是纵向还是横向来交换一些图像。为了清楚起见，我需要交换图像；它们不能简单地调整大小

我已经编写了以下HTML：

<img src="img/derp/2.jpg"/>

和jQuery：

//DETECT THE INITIAL SCREEN WIDTH AND CHANGE THE PATH TO LOAD THE APPROPRIATE IMAGES

    if ($(window).width() < 960) {
        $("img").each(function() {
            $(this).attr("src", $(this).attr("src").replace("img/derp", "img/port"));
        });
    }

    else {
        $("img").each(function() {
              $(this).attr("src", $(this).attr("src").replace("img/derp", "img/land"));
        });

    }


//DETECT THE CHANGED SCREEN WIDTH AND SWITCH THE IMAGE PATH IF NECESSARY

$(window).on('resize', function() {

        if ($(window).width() < 960) {
            $("img").each(function() {
                  $(this).attr("src", $(this).attr("src").replace("img/land", "img/port"));
            });

        } else {
            $("img").each(function() {
                  $(this).attr("src", $(this).attr("src").replace("img/port", "img/land"));
            });
        }
});

//检测初始屏幕宽度并更改路径以加载适当的图像
如果（$（窗口）.width（）<960）{
$（“img”）。每个（函数（）{
$（this.attr（“src”），$（this.attr（“src”）.replace（“img/derp”，“img/port”）；
});
}
否则{
$（“img”）。每个（函数（）{
$（this.attr（“src”），$（this.attr（“src”）。替换（“img/derp”、“img/land”）；
});
}
//检测更改的屏幕宽度，必要时切换图像路径
$（窗口）.on（'resize'，function（））{
如果（$（窗口）.width（）<960）{
$（“img”）。每个（函数（）{
$（this.attr（“src”），$（this.attr（“src”）。替换（“img/land”、“img/port”）；
});
}否则{
$（“img”）。每个（函数（）{
$（this.attr（“src”），$（this.attr（“src”）。替换（“img/port”、“img/land”）；
});
}
});

这一切都很好，除了在切换到正确的映像目录之前，它首先在控制台中抛出一个404。我尝试过在HTML中以及在HTML顶部加载此脚本，但没有任何区别

---

有人知道我可以用什么方法让jQuery在浏览器尝试加载图像之前更改图像路径，这样它就不会给我404了吗？

一个更简单的解决方案是使用媒体查询，而不是用jQuery替换图像。通过CSS将图像设置为背景，并根据屏幕大小应用不同的规则。当一个图像被另一个图像替换时，它将工作得更快，并且不会出现“闪烁”/页面重画。

轮子已经发明出来了

CSS3

<img src="image.jpg"
 data-src-600px="image-600px.jpg"
 data-src-800px="image-800px.jpg"
 alt="">

---

查看更多信息：

我考虑过这一点，但这是针对画廊图片的。其中大约有24个需要改变。其余部分将按比例调整大小。我不是必须为每一个单独编写一个类吗？或者是否有一种方法可以使用CSS来更改路径而不是更改背景图像？如果每次图像都相同，我将使用一个sprite，这将大大提高性能。如果它们不断变化，你最好使用JavaScript解决方案。不幸的是，它们不一样。这是一个照片库。大多数是正方形，大小成比例，但有些是长矩形，大小不同，因此必须交换。谢谢你的帮助！理论上我喜欢这个，但我无法在任何浏览器中使用它。我读了链接文章和该文章中链接的文章，等等。只是无法让它工作：(