Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- programmieren:php:snippets:lazy_load [13/10/2019 13:28] – conny
+++ programmieren:php:snippets:lazy_load [Unbekanntes Datum] (aktuell) – Externe Bearbeitung (Unbekanntes Datum) 127.0.0.1
@@ Zeile 1: / Zeile 1: @@
 ==== Lazy Load ====
-\\
 nachladen von Grafiken welche außerhalb des sichtbaren Bereichs sind.\\
 \\
@@ Zeile 7: / Zeile 7: @@
 JTL Forum:\\
 https://forum.jtl-software.de/threads/wie-kann-ich-bilder-im-content-den-lazy-load-effekt-zuweisen.122966/#post-671571\\
+\\
+http://jquery.eisbehr.de/lazy/example_show-a-loading-image\\
 <code html>
-<img alt="mein Testbild" class="lazyloader img-responsive" src="media/image/product/1206/md/bild.jpg" />
+<img class="lazy" data-src="images/1.jpg" />
+<img class="lazy" data-src="images/2.jpg" />
+<img class="lazy" data-src="images/3.jpg" />
+<img class="lazy" data-src="images/4.jpg" />
+<img class="lazy" data-src="images/5.jpg" />
+<img class="lazy" data-src="images/6.jpg" />
 </code>
 <code js>
+// plugin build-in placeholder management
 $(function() {
-   $("img.lazyloader").lazy(($(window).height() / 2), function() {
+  $('.lazy').lazy({
-   // hier blabla wenn in der Zwischenzeit Schmetterlinge über den Bildschirm fliegen sollen
+     placeholder: "data:image/gif;base64,R0lGODlhEALAPQAPzl5uLr9Nrl8e7..."
   });
 });
 </code>
+<code css>
+img.lazy {
+        width: 700px;
+        height: 467px;
+        display: block;
+        /* optional way, set loading as background */
+        background-image: url('images/loading.gif');
+        background-repeat: no-repeat;
+        background-position: 50% 50%;
+    }
+</code>