Question

我有一些代码，其中resize函数在运行时检查屏幕宽度并加载图像的高分辨率版本或标准分辨率版本。

当重复调整两个CSS定义的断点宽度之间的宽度时，脚本会将-large.jpg附加到文件名，从而生成imagename-large-large.jpg。

   function resize(){
      $('.image').each(function() {
        var image = $(this).find('.image img');
        var src = $(this).find('img').attr('src');
        var highRes = src.replace(".jpg", "-large.jpg");
      });
       if ($(window).width() > 1920) {
           image.attr("src", highRes);
       }
       else {
           image.attr("src", src);
       }
    }

我不知道如何阻止脚本将-large.jpg附加到文件名。这样做的最佳方法是什么？

Answer 1

您可以search src获取字符串-large。如果找不到，则搜索返回-1，如果匹配，则返回匹配的位置。

  $('.image').each(function() {
    var image = $(this).find('.image img');
    var src = $(this).find('img').attr('src');
    if(src.search('-large') !== -1){
      // already has -large in it
    }
    var highRes = src.replace(".jpg", "-large.jpg");
  });

Answer 2

请改为尝试：

function resize(){
  $('.image').each(function() {
    var image = $(this).find('.image img'),
      src = $(this).find('img').attr('src')
      isLarge = /\-large/.test(src);
    if ($(window).width() > 1920 && !isLarge) {
      image.attr("src", src.replace(".jpg", "-large.jpg"));
    }
    else if (isLarge) {
      image.attr("src", src.replace("-large.jpg", ".jpg"));
    }
  });
}

如果需要更改src，我们只会替换它。

如果变量已经存在，则不要运行if语句

2 个答案: