Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- programmieren:php:snippets:lazy_load [13/10/2019 13:14] – angelegt 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.\\
 \\
-https://t3n.de/news/jquery-unveil-wahrscheinlich-475653/
+https://t3n.de/news/jquery-unveil-wahrscheinlich-475653/\\
+\\
+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 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() {
+  $('.lazy').lazy({
+     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>