0

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

charlie
  • 11
  • 6
  • I think a good approach for you is this: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction You can set the image src depending on screen sizes – Pedro Costa Dec 18 '20 at 13:16
  • Well, I would like to try this, but srcset works only with recent versions of JustifiedGallery ("2019-04-24 Fixed Big image loading even with correct srcset and thumbnailPath"),and my gallery works only with old version of JG. I don't manage to make it work with the last version of jquery.justifiedGallery.js ! – charlie Dec 18 '20 at 16:40

1 Answers1

0

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...

charlie
  • 11
  • 6