Question

我之前问了一个问题，以便获取我所拥有的代码，但我想问一个单独的问题，以获得有关我正在进行的下一个问题的帮助。我正在做的是使用adobe scene 7创建图像预设，然后交换网址的末尾，以便在移动设备上我们提供更小的图像，以提高我们网站的整体速度。我想做两件事。

1）此代码仅在页面调整大小时起作用，我无法弄清楚如何在页面加载时使其工作。如果窗口是850或更高，我希望图像自动更改为更大的图像，如果屏幕小于850，那么它将加载较小的图像。图像将以html中的移动大小加载，以便在移动设备上加载较小的图像，然后在桌面上，jquery将使更大的图像替换它。

2）这仅适用于一种图像。有没有办法可以让这个代码适用于多个不同的项目？例如，下面的代码是针对我们的主页横幅，但我们需要产品图片，产品缩略图，产品视频等代码。对于产品图片，我们将$ productmobile $更改为$ productfull $。如果这没有意义，那么我可以回答任何问题。

$(window).resize(function(){
  if ($(window).width() >= 850){    
    $('img').attr('src', function(index, existingSrc){
 return existingSrc.replace('$carousel$', '$homebannerfull$');
});
}   
});

$(window).resize(function(){
  if ($(window).width() <= 850){    
     $('img').attr('src', function(index, existingSrc){
        return existingSrc.replace('$homebannerfull$', '$carousel$');

});
}   
});

jsfiddle link （为了完成这项工作，你必须来回滑动中间条以使“结果”窗口的宽度发生变化）

编辑：删除重复。

Answer 1

你必须在函数中创建所有函数，如下所示：

var _resize = function(){
    if ($(window).width() >= 850){  
        $('img').attr('src', function(index, existingSrc){
            return existingSrc.replace('$carousel$', '$homebannerfull$');
        });
    }
    if ($(window).width() < 850){  
        $('img').attr('src', function(index, existingSrc){
            return existingSrc.replace('$homebannerfull$', '$carousel$');
        });
    }   
}
$(window).resize(function(){
    _resize();
});
_resize();

对于不同的页面，也许你可以创建一个数组，但你必须验证页面的类型（如家庭，产品，收集，其他...）

用div包裹imgages：

//html
<div class="product">
    <img alt="" src="http://s7d2.scene7.com/is/image/scrubs/sb-hpb-bogo50-landau-20150928?$carousel$" data-src="http://s7d2.scene7.com/is/image/scrubs/2261rh_redhearts?$carousel$">
</div>
<div class="produc-thumb">
    <img alt="" src="http://otherimage.jpg?other_$carousel$" />
</div>

//script
var _resize = function(imgs){
    if ($(window).width() >= 850){  
        $('.product .img').attr('src', function(index, existingSrc){
            return existingSrc.replace(imgs.product_images[0], imgs.product_images[1]);
        });
        $('.product-thumb .img').attr('src', function(index, existingSrc){
            return existingSrc.replace(imgs.product_thumb[0], imgs.product_thumb[1]);
        });
    }
    if ($(window).width() < 850){  
        $('.product .img').attr('src', function(index, existingSrc){
            return existingSrc.replace(imgs.product_images[1], imgs.product_images[0]);
        });
        $('.product-thumb .img').attr('src', function(index, existingSrc){
            return existingSrc.replace(imgs.product_thumb[1], imgs.product_thumb[0]);
        });
    }   
}
//array of images in an object
var imgs = {
    "home":['other1_$carousel$','other1_$homebannerfull$'],
    "product_images":['$carousel$','$homebannerfull$'],
    "product_thumb":['other_$carousel$','other_$homebannerfull$']
};
//onload
$(window).resize(function(){
    _resize(imgs);
});
_resize(imgs);

Answer 2

您可以通过触发功能来执行此操作：

$(window).trigger('resize');

还要确保将代码包装在文档中。

Answer 3

使用jQuery在页面加载后执行代码的最佳方法是使用

$(document).ready(function(){ /* executed after page load */});

首先，我冒昧地通过将代码缩减为一个块来使代码更高效。现在，您需要为页面加载调用该代码一次，每次调整大小一次。

//executes after page load
$(document).ready(function(){
  if ($(window).width() >= 850){    
    $('img').attr('src', function(index, existingSrc){
      return existingSrc.replace('$carousel$', '$homebannerfull$');
    }
  }
  else{
    $('img').attr('src', function(index, existingSrc){
      return existingSrc.replace('$homebannerfull$', '$carousel$');
    }
  }
});

//executes on resize
$(window).resize(function(){
  if ($(window).width() >= 850){    
    $('img').attr('src', function(index, existingSrc){
      return existingSrc.replace('$carousel$', '$homebannerfull$');
    }
  }
  else{
    $('img').attr('src', function(index, existingSrc){
      return existingSrc.replace('$homebannerfull$', '$carousel$');
    }
  }
});

由于这是两次执行相同的代码，最好将它分成一个函数，然后调用该函数两次，但如果你想以不同的方式处理每个情况，你需要将它分开。

关于问题的第二部分，是的，您可以将此代码应用于其他图像。为此，您需要更改选择器$（'img'）以选择新元素，并将$ _mobile和$ _full变量更改为其他源。

功能仅在调整大小时触发，而不是在页面加载时触发

3 个答案: