Question

此问题是此处问题的变体：Is it possible to recalculate the `srcset` image used if browser window is resized?

我的网站基本上使用带有多个图片的动态滑块，我只能用a.class img而不是ID来定位图像。此外，有多个imgs需要修改a.class。

当浏览器窗口调整大小时，如何使用jQuery或常规javascript让浏览器更新到新的srcset？我希望只有当窗口调整大小超过几个触发点时才会这样做，例如在宽度点1170px和1000px处。

以另一种方式提出问题，有没有办法使用jQuery使srcset像艺术指导一样运作？我无法使用<picture>元素或替代品。

因此每个图像都包含以下代码：

<div class="carousuel-image slider-full">
<a href="/post-link">
<img srcset="http://test-site.com/wp-content/uploads/2015/12/collage_hk_day_3-216x160.jpg 216w, http://test-site.com/wp-content/uploads/2015/12/collage_hk_day_3-270x250.jpg 270w, http://test-site.com/wp-content/uploads/2015/12/collage_hk_day_3-570x350.jpg 570w, http://test-site.com/wp-content/uploads/2015/12/collage_hk_day_3-1024x1024.jpg 1024w, http://test-site.com/wp-content/uploads/2015/12/collage_hk_day_3-1170x500.jpg 1170w, http://test-site.com/wp-content/uploads/2015/12/collage_hk_day_3-1170x350.jpg 1170w, http://test-site.com/wp-content/uploads/2015/12/collage_hk_day_3-1200x500.jpg 1200w" sizes="(min-width: 1170px) 1200px, (min-width: 1170px) 1170px, (min-width: 1024px) 1170px, (min-width: 570px) 1024px, (min-width: 270px) 570px, (min-width: 216px) 270px, 216px" width="1200" height="500" class="attachment-slider-full tc-thumb-type-thumb wp-post-image wp-post-image v-centered" alt="test-site hk day 3" style="width: 1903px; height: auto; top: -146.5px; left: 0px;">
</a>
</div>

（此代码重复多方）

感谢您的帮助！

Answer 1

您可以在窗口调整大小事件中使用此代码，首先您必须声明一个新图像数组并替换滑块的所有img src：

/* defien an array with new image path*/
  newsrc[0] = image1 path;
  newsrc[2] = image2 path;
  newsrc[3] = image3 path;
  newsrc[4] = image4 path;
   /* find all images inside slider */
$('.carousuel-image').find('a.class').each(function(index, element) {       
        $(this).find('img').src('newsrc[index]') ;  
});

对于多个滑块，您可以在滑块循环中包裹上面的代码。

如何使用jQuery重新加载＆＃39; srcset＆＃39;浏览器调整大小时的图像？

1 个答案: