如何在浏览器调整大小时使用jQuery重新加载'srcset'图片？

问题描述：

这个问题的问题在这里的变化：Is it possible to recalculate the `srcset` image used if browser window is resized?如何在浏览器调整大小时使用jQuery重新加载'srcset'图片？

基本上我的网站使用的是动态滑盖多张图片，我只能以图像与说a.class img而不是ID。此外，有多个img与该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>

感谢您的帮助！

也许.. $（窗口）。在（ '调整'，函数（）{ $（ '＃ '）.attr（' srcset'，...）; }）; – Naterade

hmm现在srcset是动态插入的，可能会改变，所以用window-on-resize手动指定srcset可能有点太单调 –

这就是游戏的名字，它的编码。如果你不喜欢，那么你可以使用CSS媒体查询或PHP。除非您使用插件，否则不会有太多的动态方法。 – Naterade

答

您可以使用此代码的窗口中调整时，首先u必须申报新形象的一个阵列并更换滑块的所有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重新加载'srcset'图片？

相关推荐