Question

我有以下代码，它遍历每个具有类.image-resize的图像，并根据屏幕大小为它们提供newWidth。但是我想给每个图像赋予不同的newWidth，例如我希望图像给出这些值：

第1张图片）newWidth = 'wid=860&crop=0,0,860,650';

第二张图片）newWidth = 'wid=760&crop=0,0,760,650';

第3张图片）newWidth = 'wid=560&crop=0,0,560,650';

第4张图片）newWidth = 'wid=460&crop=0,0,460,650';

如你所见，每个人的参数略有不同，我怎么能实现呢？

HTML

  <img class="image-resize" src="http://images.domain.com/is/image/domain/style7?wid=960&crop=0,0,960,650">
    <img class="image-resize" src="http://images.domain.com/is/image/domain/style7?wid=960&crop=0,0,960,650">
    <img class="image-resize" src="http://images.domain.com/is/image/domain/style7?wid=960&crop=0,0,960,650">
    <img class="image-resize" src="http://images.domain.com/is/image/domain/style7?wid=960&crop=0,0,960,650">

JQUERY

$('.image-resize').each(function() {
    var element = $(this),
        src = $(this).attr('src'),
        regx = /(wid.*)$/g,
        currentWidth,
        newWidth,
        newCrop,
        newSrc,
        parameters;

   if ($(window).width() > 623) { 
     /* Large Displays ----------- */
     //Return large image if screen size is over 768px
     currentWidth = src.match(regx);
     newWidth = 'wid=960&crop=0,0,960,650';
     newSrc = src.replace(currentWidth, newWidth);


   }   else if ($(window).width() <= 623) {
     /* Smartphones ----------- */
     currentWidth = src.match(regx);
     newWidth = 'wid=640&crop=360,0,600,400';
     newSrc = src.replace(currentWidth, newWidth);
   }

   element.attr('src', newSrc);
});

Answer 1

根据图像大小的不同逻辑？或者你有一个图像列表，并且都有自己手动给出的尺寸吗？

我认为您正在使用服务器端img调整代码。通过这种方法，您的图像将首先使用给定的变量进行渲染，然后使用根据窗口宽度计算的新值重新渲染。

这浪费了服务器资源。

您可以在javascript / jquery上创建图像，并使用计算/接收的值将它们附加到屏幕上的位置。这样，您可以将所有逻辑保存在一个位置，并使保存的服务器不会重新创建图像。

浏览以相同类命名的每个图像，但为它们指定不同的宽度

1 个答案: