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%;
    }
Cookies helfen bei der Bereitstellung von Inhalten. Diese Website verwendet Cookies. Mit der Nutzung der Website erklären Sie sich damit einverstanden, dass Cookies auf Ihrem Computer gespeichert werden. Außerdem bestätigen Sie, dass Sie unsere Datenschutzerklärung gelesen und verstanden haben. Wenn Sie nicht einverstanden sind, verlassen Sie die Website. Weitere Information
programmieren:php:snippets (236 views) · Zuletzt geändert: 13/10/2019 13:44 von conny