0

我的 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€&lt;/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€&lt;/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,
    });

结果（您可以在此处看到 测试页面）是更改路径正在工作，但是 JustifiedGallery 无法正常工作。通常它应该在逐行显示画廊之前预加载图像。但在这种情况下，它首先显示所有带有“alt”图像内容的页面，然后图像以随机顺序出现，并不美观。我不知道如何着手修复它。

感谢您的任何帮助

4

1 回答 1

0

谢谢，我设法使它与 Firefox 上的 IMG SRCSET 一起工作，但不能在 Chrome 上工作（忽略它）。我发现了很多关于这个问题的话题。所有人都说我必须清空缓存，但即使缓存为空，Chrome v65 也会忽略 srcset ...

于 2020-12-20T14:59:26.587 回答