Benutzer-Werkzeuge

Webseiten-Werkzeuge


programmieren:php:snippets:lazy_load

Lazy Load

nachladen von Grafiken welche außerhalb des sichtbaren Bereichs sind.

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

<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" />
// plugin build-in placeholder management
$(function() {
  $('.lazy').lazy({
     placeholder: "data:image/gif;base64,R0lGODlhEALAPQAPzl5uLr9Nrl8e7..."
  });
});
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%;
    }
Diese Website verwendet nur für den Betrieb notwendige Cookies. Durch die Nutzung der Website stimmen Sie dem Speichern von Cookies auf Ihrem Computer sowie den Datenschutzbestimmungen zu. Wenn Sie nicht einverstanden sind, verlassen Sie die Website. Weitere Information
programmieren:php:snippets (803 views) · Zuletzt geändert: 13/10/2019 13:44 von conny

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki