justified图库：尝试在屏幕<800px时更改图像路径

Question

My Justified Gallery在智能手机上加载速度非常慢，所以当屏幕<800像素。新路径具有较小的图像(h350而不是h450(。

我一直在尝试这个

<div id="alldrawings">
<div>
<a class="group1" href="img/drawing/poisson-serigraphie.jpg"><img alt="poisson" src="img/h450/poisson-serigraphie.jpg"/></a>
<div class="caption">Poisson, Sérigraphie, 2020<br /><a href="contact.html" class="forsale">A4 5€ / A3 8€</a></div>
</div>
<div>
<a class="group1" href="img/drawing/bee-serigraphie.jpg"><img alt="abeille" src="img/h450/bee-serigraphie.jpg"/></a>
<div class="caption">Abeille, Sérigraphie, 2020<br /><a href="contact.html" class="forsale">36x25cm 8€ / 45x33cm 15€ / 56x40cm 20€</a></div>
</div>
<!-- and so on ... -->
</div>
$(function() {
var width = $(window).width(); 
if (width < 800) {
$("#alldrawings img").each(function(index){
var src = $(this).attr("src")
var photoName = src.substr(src.lastIndexOf("/"));
$(this).attr("src", "img/h350/"+photoName)
})
}
else{
$("#alldrawings img").each(function(index){
var src = $(this).attr("src")
var photoName = src.substr(src.lastIndexOf("/"));
$(this).attr("src", "img/h450/"+photoName)
})
}});
<!-- JUSTIFIED GALLERY -->
$('#alldrawings').justifiedGallery({
rowHeight: 280,
maxRowHeight: 450,
lastRow: 'nojustify',
margins : 8,
});

结果(您可以在这里的测试页面上看到(是，更改路径是可行的，但随后JusticedGallery无法正常工作。通常情况下，它应该在逐行显示库之前预加载图像。但在这种情况下，它首先显示所有带有"alt"图像内容的页面，然后图像以随机顺序出现，这并不美观。我不知道如何解决它。

感谢您的帮助

Answer 1

谢谢，我设法在Firefox上使用IMG SRCSET，但在Chrome上没有(忽略它(。我发现了很多关于这个问题的话题。所有人都说我必须清空缓存，但即使有空缓存，Chrome v65也会忽略srcset。。。