Jquery Lazy

[FlorianF]

Hat jemand von euch jQuery Lazyload any im Einsatz und kann mir hier weiterhelfen?

https://github.com/emn178/jquery-lazyload-any

Da das Template, welches ich bearbeite auch mit hintergrundbildern arbeitet und ich diese nicht lazy loaden kann, würde ich das gerne darüber erledigen.

Eingebunden ist die Javascript Datei.

Mein Code, der nicht funktioniert, schaut so aus:

<div class="you-want-lazyload">
        <--
      	<span class="product-media-background" style="background-image: url('{{ featured_image | product_img_url: image_size }}');" ></span>
      	<span class="product-media-background-hover" style="background-image: url('{{ my_product.images[1] | product_img_url: image_size }}');"></span>
      	-->
        </div>
...
...
...
<script>
  function load(img)
{
  img.fadeOut(0, function() {
    img.fadeIn(1000);
  });
}
$('.you-want-lazyload').lazyload({load: load});
</script>

Wäre super, wenn mir hier jemand weiterhelfen kann. Meiner Meinung nach habe ich das genau wie im Beispiel umgesetzt, nur dort ist ja alles plain Html und nicht liquid Code wie im Shopify Theme Editor. Escapen habe ich auch erfolglos versucht.

[r8r]

@FlorianF – was für HTML kommt denn im Browser an?

Ansonsten seh ich, dass beim öffnenden HTML-Kommentar-Tag das Ausrufezeichen fehlt … sollte wohl so lauten:

 <!--

Falls die Library da auf Pattern matcht, dann geh ich davon aus, dass das ein Problem verursacht.

Liebe Grüße,
Mario