Javascript 在文件扩展名之前重复添加图像大小

我遇到了一个问题，我似乎找不到问题的原因。我对JavaScript和jQuery都有点陌生

但是通过使用下面的选项，然后调整页面大小，而不是简单地将图像的大小添加到图像中，src会被重复添加，例如，responsive_Course_2_2_large_large_large_large_large_large_large.png而不是responsive_Course_2_2_large.png

$(window).resize(function () {

    if ($(window).width() < 600) {

        if (ImageSize != 'stand') {
            $.each(imgIds, function (index, value) {
                Image_src = $('#' + value).attr('src');
                Image = Image_src.replace(/(\.[\w\d_]+)$/i, '$1');
                $('#' + value).attr('src', Image);
                $('#' + value).attr("ImageSize", 'stand');
            });
            $('#PageContentRow').attr('style', 'background-image:Url(../img/' + pageID + '_back.png)');
        }
    }
    else if ($(window).width() > 960 && $(window).width() < 1280) {
        if (ImageSize != 'large') {
            $.each(imgIds, function (index, value) {
                Image_src = $('#' + value).attr('src');
                ImageLarge = Image_src.replace(/(\.[\w\d_]+)$/i, '_large$1');
                $('#' + value).attr('src', ImageLarge);
                $('#' + value).attr("ImageSize", 'large');
            });
            $('#PageContentRow').attr('style', 'background-image:Url(../img/' + pageID + '_back_Large.png)');
        }
    }
   else {
        $.each(imgIds, function (index, value) {
            Image_src = $('#' + value).attr('src');
            Image = Image_src.replace(/(\.[\w\d_]+)$/i, '$1');
            $('#' + value).attr('src', Image);
            $('#' + value).attr("ImageSize", 'stand');
        });
        $('#PageContentRow').attr('style', 'background-image:Url(../img/' + pageID + '_back.png)');
    }
});

$（窗口）。调整大小（函数（）{
如果（$（窗口）.width（）<600）{
如果（ImageSize！=“支架”）{
$.each（imgIds，函数（索引，值）{
Image_src=$（'#'+value）.attr（'src'）；
Image=Image\u src.replace（/（\.[\w\d\]+）$/i，$1'）；
$（'#'+value）.attr（'src'，Image）；
$（'#'+value）.attr（“ImageSize”，“stand”）；
});
$（'PageContentRow'）.attr（'style'，'back image:Url（../img/'+pageID+''u back.png'）；
}
}
else if（$（window.width（）>960&&$（window.width（）<1280）{
如果（ImageSize！=“大”）{
$.each（imgIds，函数（索引，值）{
Image_src=$（'#'+value）.attr（'src'）；
ImageLarge=Image\u src.replace（/（\.[\w\d\u]+）$/i，“\u large$1”）；
$（'#'+value）.attr（'src'，ImageLarge）；
$（'#'+value）.attr（“ImageSize”，“large”）；
});
$（'PageContentRow'）.attr（'style'，'background image:Url（../img/'+pageID+''u back\u Large.png'）；
}
}
否则{
$.each（imgIds，函数（索引，值）{
Image_src=$（'#'+value）.attr（'src'）；
Image=Image\u src.replace（/（\.[\w\d\]+）$/i，$1'）；
$（'#'+value）.attr（'src'，Image）；
$（'#'+value）.attr（“ImageSize”，“stand”）；
});
$（'PageContentRow'）.attr（'style'，'back image:Url（../img/'+pageID+''u back.png'）；
}
});

因为您一直在将其添加到图像中

下面您将删除文件扩展名并将其添加到大文件中

ImageLarge = Image_src.replace(/(\.[\w\d_]+)$/i, '_large$1');

您的正则表达式应该考虑_large

var str1 = "Responsive_Course_2_2.png";
var str2 = "Responsive_Course_2_2_large.png";

var re = /(_large)?(\.[\w\d_]+)$/i;
console.log( str1.replace(re, '_large$2') );
console.log( str2.replace(re, '_large$2') );

---

因为你一直在把它添加到图像中

下面您将删除文件扩展名并将其添加到大文件中

ImageLarge = Image_src.replace(/(\.[\w\d_]+)$/i, '_large$1');

您的正则表达式应该考虑_large

var str1 = "Responsive_Course_2_2.png";
var str2 = "Responsive_Course_2_2_large.png";

var re = /(_large)?(\.[\w\d_]+)$/i;
console.log( str1.replace(re, '_large$2') );
console.log( str2.replace(re, '_large$2') );

---

这是一种稍微有点另类的方法，但您是否考虑过在调整窗口大小时在

主体上设置一个类，然后为适当的大小设置多个
CSS
类？我认为这会稍微整洁一点，也意味着
JavaScript
和
CSS
之间的耦合不那么紧密。这也意味着您可以使用大小来确定页面上元素的其他方面

调整页面大小
宽度小于600

将车身等级设置为
small

宽度介于960和1280之间

将车身等级设置为
medium

宽度大于1280

将主体类设置为
large

这意味着在
CSS
中，您可以：

body.small #PageContentRow
{
    background-image: url('/my-image_small.png');
}
body.medium #PageContentRow
{
    background-image: url('/my-image_medium.png');
}
body.large #PageContentRow
{
    background-image: url('/my-image_large.png');
}

这是一种稍微有点另类的方法，但您是否考虑过在调整窗口大小时在
主体上设置一个类，然后为适当的大小设置多个
CSS
类？我认为这会稍微整洁一点，也意味着
JavaScript
和
CSS
之间的耦合不那么紧密。这也意味着您可以使用大小来确定页面上元素的其他方面

调整页面大小
宽度小于600

将车身等级设置为
small

宽度介于960和1280之间

将车身等级设置为
medium

宽度大于1280

将主体类设置为
large

这意味着在
CSS
中，您可以：

body.small #PageContentRow
{
    background-image: url('/my-image_small.png');
}
body.medium #PageContentRow
{
    background-image: url('/my-image_medium.png');
}
body.large #PageContentRow
{
    background-image: url('/my-image_large.png');
}

还有背景大小css属性。我不确定你想做什么，但听起来可能是可行的

#PageContentRow
{
  background-size: 100%; /* Scales background to #PageContentRow's width */
}

还有背景大小css属性。我不确定你想做什么，但听起来可能是可行的

#PageContentRow
{
  background-size: 100%; /* Scales background to #PageContentRow's width */
}

不要这样设置“样式”：使用
.css（“背景图像”，“任何”）
-还要设置“src”，请使用
.prop（）
而不是
.attr（）
。另外：在“调整大小”处理程序中执行此操作实际上是行不通的。。。“resize”事件在用户调整大小时被频繁触发；一秒钟很多次。试图直接在处理程序中完成所有这些工作会有糟糕的性能。不要这样设置“样式”：使用
.css（“背景图像”，“任何”）
-还要设置“src”，请使用
.prop（）
而不是
.attr（）
。另外：在“调整大小”处理程序中执行此操作实际上是行不通的。。。“resize”事件在用户调整大小时被频繁触发；一秒钟很多次。尝试直接在处理程序中执行所有这些工作会有糟糕的性能。我还将ImageSize设置为large，我想If会检查大小，如果设置为ImageSize，则跳过！=大。那也可以，但是当你回去的时候你不需要删除它，图像就会是标准的吗？是的，如果屏幕变小了，_large.png会被_standard.pngSo替换，正则表达式应该是
/（_large | u standard）？（\.[\w\d\u]+）$/i
很抱歉，是否需要简单地将_标准替换为_large或_xlarge？我还将ImageSize设置为large，我想If会检查大小，如果设置为ImageSize，则跳过！=大。那也可以，但是当你回去的时候你不需要删除它，图像就会是标准的吗？是的，如果屏幕变小了，_large.png会被_standard.pngSo替换，正则表达式应该是
/（_large | u standard）？（\.[\w\d\u]+）$/i我是