justifiedGallery：屏幕 <800px 时尝试更改图像路径

Question

My Justified Gallery is very slow to load on smartphone, so I would like to change the image path when screen is < 800px. The new path has smaller images (h350 instead of h450).

I've been trying like this

<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,
    });

The result (that you can see here the test page ) is that changing path is working, but then JustifiedGallery is not working properly. Normally it should preload images before to show the gallery, row by row. But in this case it is first showing all the page with the 'alt' image content and then images appear in random order, and it's not beautiful. I don't know how to proceed to fix it.

Thank you for any help

Answer 1

Thanks, I managed to make it work with IMG SRCSET on Firefox, but not on Chrome (ignoring it). I found many topics about this issue. All say I've to empty the cache, but even with an empty cache, Chrome v65 is ignoring the srcset...