替换所有图像的 SRC 中的字符串答案

【问题标题】：Replacing strings in all images' SRCs替换所有图像的 SRC 中的字符串
【发布时间】：2013-09-12 22:00:18
【问题描述】：

您好，我正在使用一个名为 soliloquy 的 wordpress 滑块插件。

目前在桌面上一切都很好。但在移动设备上，图像占用了太多内存，导致 Safari 崩溃。

我正在使用 modernizr 来检测它是否是触摸设备，然后替换 src 字符串

name.jpg

（上传图片的原尺寸）到

name-480x480.jpg

（小图）

我现在的代码是

if (Modernizr.touch){
$('img.soliloquy-item-image').each(function(index, element) {
$(this).attr('src', $(this).attr('src').replace('.jpg', '-480x480.jpg'));
});

这显然只替换了第一张图片，而不是全部。有人知道为什么吗？

【问题讨论】：

你有没有想过使用css媒体查询？您可能会遇到的一个问题是平板电脑是坚固的设备，我相信您不希望在支持更大的设备的设备上使用 480x480 图像。 w3.org/TR/css3-mediaqueries

标签： jquery image mobile replace src

【解决方案1】：

快速查看源代码，该插件使用 jQuery 数据属性 soliloquy-src，因此也尝试替换它：

if (Modernizr.touch){
    $('img.soliloquy-item-image').each(function(index, element) {
        var img = $(this);
        img.attr("src", img.attr("src").replace(".jpg", "-480x480.jpg"));
        img.data("soliloquy-src", img.data("soliloquy-src").replace(".jpg", "-480x480.jpg"));
    });
}

【讨论】：