jQuery之replace字符串替换实现不同尺寸图片切换

在Web开发中，图片的展示效果是非常重要的。我们经常需要在网站中展示不同尺寸的图片以适应不同的设备屏幕和分辨率。通常情况下，我们使用CSS媒体查询或JavaScript来根据屏幕大小选择不同尺寸的图片。

实现思路

我们可以通过在图片URL中添加特定的标记来表示不同尺寸的图片，并使用jQuery的replace()方法替换该标记为实际的图片尺寸。具体的实现步骤如下：

在HTML代码中创建待展示的图片元素，并将其设置为相对定位（position:relative）以便进行绝对定位的子元素。

<div class="image-container">
  <img src="image.jpg">
</div>

创建一个包含不同尺寸图片URL的对象，并将其保存到变量中。在这个例子中，我们使用了以下尺寸：400x400、800x800、1200x1200。

const imageSizes = {
  small: '400x400',
  medium: '800x800',
  large: '1200x1200'
};

当页面加载时，我们需要获取待展示图片的容器元素，并将其保存到变量中。

const imageContainer = $('.image-container');

在JavaScript代码中，我们需要通过正则表达式将包含尺寸标记的图片URL替换为实际的图片地址。我们可以使用jQuery的replace()方法来实现。

const imagePath = 'image-' + imageSizes.large + '.jpg';
const imageUrl = 'https://example.com/' + imagePath;

const srcset = imageUrl.replace(/\-(\w+)\./g, function(match, size) {
  return '-' + imageSizes[size] + '.';
});

imageContainer.find('img').attr({
  src: imageUrl,
  srcset: srcset
});

在这个代码中，我们首先创建了一个包含尺寸标记的图片路径，并根据该路径创建了实际的图片URL。接下来，我们使用正则表达式将图片URL中的尺寸标记替换为实际的尺寸。在replace()方法的回调函数中，我们使用第二个参数（size）获取到匹配的尺寸标记，并从imageSizes对象中获取对应的实际尺寸。最后，我们使用find()方法和attr()方法更新img元素的src和srcset属性值，使其展示正确的图片。

当页面大小发生变化时，我们需要重新计算图片的展示尺寸，并用新的尺寸标记替换原有的标记。我们可以使用window对象的resize事件来监听页面大小变化。

$(window).on('resize', function() {
  const imageSize = getImageSize();
  const imagePath = 'image-' + imageSize + '.jpg';
  const imageUrl = 'https://example.com/' + imagePath;

  const srcset = imageUrl.replace(/\-(\w+)\./g, function(match, size) {
    return '-' + imageSizes[size] + '.';
  });

  imageContainer.find('img').attr({
    src: imageUrl,
    srcset: srcset
  });
});

function getImageSize() {
  const width = imageContainer.width();
  if (width < 600) {
    return 'small';
  } else if (width < 1000) {
    return 'medium';
  } else {
    return 'large';
  }
}

在这个代码中，我们使用$(window).on()方法监听resize事件，并在回调函数中重新计算图片的展示尺寸。getImageSize()函数返回一个字符串表示当前应该使用的尺寸标记。根据新的尺寸标记，我们创建了新的图片路径和URL，并使用replace()方法将尺寸标记替换为实际尺寸。最后，我们使用find()方法和attr()方法更新img元素的src和srcset属性值，使其展示正确的图片。

完整代码

下面是完整的HTML、CSS和jQuery代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>不同尺寸图片切换</title>
  <style>
    .image-container {
      position: relative;
      display: inline-block;
    }

    .image-container img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(function() {
      const imageContainer = $('.image-container');
      const imageSizes = {
        small: '400x400',
        medium: '800x800',
        large: '1200x1200'
      };

      updateImageSize();

      $(window).on('resize', function() {
        updateImageSize();
      });

      function updateImageSize() {
        const imageSize = getImageSize();
        const imagePath = 'image-' + imageSize + '.jpg';
        const imageUrl = 'https://example.com/' + imagePath;

        const srcset = imageUrl.replace(/\-(\w+)\./g, function(match, size) {
          return '-' + imageSizes[size] + '.';
        });

        imageContainer.find('img').attr({
          src: imageUrl,
          srcset: srcset
        });
      }

      function getImageSize() {
        const width = imageContainer.width();
        if (width < 600) {
          return 'small';
        } else if (width < 1000) {
          return 'medium';
        } else {
          return 'large';
        }
      }
    });
  </script>
</head>
<body>
  <div class="image-container">
    <img src="">
  </div>
</body>
</html>

总结

使用jQuery的replace()方法可以很方便地实现不同尺寸图片的切换。我们只需要在图片URL中添加特定的标记，然后根据页面大小动态替换该标记为实际的图片尺寸即可。同时，我们还需要使用JavaScript监听窗口resize事件，并重新计算图片的展示尺寸。这样，就可以在不同设备屏幕和分辨率下展示最适合的图片尺寸，提高页面的加载速度和用户体验。