jQuery 追加 img src

Posted 2023-02-25

【中文标题】jQuery 追加 img src

【英文标题】：jQuery append img src

【发布时间】：2014-03-10 15:39:32

【问题描述】：

如何将“_small.jpg”添加到我在名为“banners”的 div 中的一堆图像的 img src 中？

我有一个 jQuery 脚本监听窗口调整大小 - 当低于 400 像素时，我想更改图像的 img src 以在末尾包含“_small.jpg”以调用小图像源。所以...

<img src="example.jpg" />

当以低于 480 像素的屏幕尺寸观看时，会变成

<img src="example_small.jpg" />

我该怎么做？

附：我希望脚本循环遍历“横幅”div 中的所有图像以更新它们：)

【问题讨论】：

我认为这不是一个好的举措，因为如果您在 html 中将 src 设置为 example.jpg，那么无论如何都会加载这些图像，然后在添加 _small 字符串时替换这些图像。我要么将 src 留空，然后用 js 加载所有图像（取决于屏幕大小），要么在你的 css 中设置图像的大小。

而是保留一张图片并给出 max-width:100%

我想为轮播上的小用例加载具有不同纵横比的不同图像-因此问题-将相同的源保持在 100% 很容易-但这意味着您有一个看起来不错的轮播如果您使用相同的 img src 缩放到宽度同时保持纵横比，则在桌面和移动设备上废话:)

【参考方案1】：

你可以这样做：

$("div.banners img").each(function() 
    $(this).attr("src", function() 
        var src = this.src.split(".")[0];
        return src + "_small.jpg";
    );
);

（以上假设图像名称中没有“.”，并且都具有 JPEG 类型）

【讨论】：

您不需要遍历图像，$('div.banners img').attr 应该足够了jsfiddle.net/Alfie/SrH8X

【参考方案2】：

你可以试试：

// define this somewhere in your code (credit: https://***.com/questions/280634/endswith-in-javascript)
function endsWith(str, suffix) 
    return str.indexOf(suffix, str.length - suffix.length) !== -1;


if ($(window).width() < 480) 
  $("div.banners img").each(function() 
    if (!endsWith($(this).attr('src'), '_small.jpg')) 
      // if you have more than "jpg" files you will want to replace those as well
      $(this).attr('src', $(this).attr('src').replace(/\.jpg/, '') + '_small.jpg');
    
  );

我认为应该这样做！

编辑 - 添加了基于评论的扩展删除。有关替换扩展的更多信息，请参阅this stack。

编辑 2 - 添加了对“endswith”的检查，以防在已添加小扩展名的项目上调用该函数！。

【讨论】：

@isherwood 你是对的！我认为现在应该这样做。

@dubbs 应该修复。很抱歉！

完成。一个不错的解决方案，但这里的问题是当在流体响应方法上使用它时，我正在测试检查窗口大小以检查浏览器大小的任何更改，然后重新执行此脚本 - 因此再次添加 _small.jpg ...这打破了它......如果还没有这样做的话，只有让它添加 _small.jpg 的任何方式？

@dubbs 我向“endsWith”添加了一个函数调用，以确保图像源没有“_small.jpg”。祝你好运！

@drew_w - 谢谢 - 但这似乎不起作用...在调整大小时，脚本仍在触发并将 _small 添加到 JPEG...

【参考方案3】：

你可以试试：

var src = $('img').attr('src'),
    ext = src.substr( src.lastIndexOf('.') );

src = src.replace(ext, '_small' + ext, src);

$('img').attr('src', src);

或者使用正则表达式：

var src = $('img').attr('src'),
    src = src.replace(/(\..*)$/, '_small$1', src);

$('img').attr('src', src);