Jquery Lazy

FlorianF
Neues Mitglied
1 0 0

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.

1 ANTWORT 1
r8r
Shopify Expert
2216 284 755

@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

★ Ja, man kann mich buchen; schreib mir eine Nachricht!
★ Hinterlass gerne ein Like und markiere meine Antwort gegebenenfalls als Lösung. Ich freue ich mich immer über eine Spende an die (Kinder)krebshilfe oder eine kleine Aufmerksamkeit.
Studio Mitte