Lazyload images from social media streams

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js

@@ -13,6 +13,7 @@ global.$ = global.jQuery = $;
 require('cookieconsent');
 require('slick-carousel');
 require('lazysizes');
+require('lazysizes/plugins/unveilhooks/ls.unveilhooks');
 require('bootstrap-sass/assets/javascripts/bootstrap');
 require('picturefill');
 require('leaflet');
@@ -144,6 +145,14 @@ new Vue({
                 $(this).css('backgroundImage', 'url(' + imageSource + ')');
             });
         },
+        lazyLoadBackgroundImages () {
+            document.addEventListener('lazybeforeunveil', e => {
+                const bg = e.target.getAttribute('data-bg');
+                if (bg) {
+                    e.target.style.backgroundImage = 'url(' + bg + ')';
+                }
+            });
+        },
         initCarousels () {
             let $carouselItemWrappers = $('.slider--teasers > .slider__items').not('.slick-initialized');
             $.each($carouselItemWrappers, function () {
@@ -389,6 +398,7 @@ new Vue({
             this.setMobileMode();
             this.setBackgroundImageMode();
             this.setResponsiveBackgroundImages();
+            this.lazyLoadBackgroundImages();
             this.initListeners();
             this.initFilterpanel();
             this.initCarousels();

web/typo3conf/ext/ep_theme/Resources/Private/Partials/SocialMedia/Feed/Provider-facebook.html

@@ -5,10 +5,12 @@
 			<f:then>
                 <f:if condition="{fb_full_res}">
                     <f:then>
-                        <div class="image full_resolution" data-image-id="{feed.raw.full_picture}" style="background-image: url({feed.raw.full_picture})"></div>
+                        <div class="image full_resolution lazyload" data-image-id="{feed.raw.full_picture}"
+                             data-bg="{feed.raw.full_picture}"></div>
                     </f:then>
                     <f:else>
-                        <div class="image" data-image-id="{feed.raw.picture}" style="background-image: url({feed.raw.picture})"></div>
+                        <div class="image lazyload" data-image-id="{feed.raw.picture}"
+                             data-bg="{feed.raw.picture}"></div>
                     </f:else>
                 </f:if>
 			</f:then>
@@ -35,7 +37,8 @@
 			<f:count>{feed.raw.comments.data}</f:count>
 		</span>
 		<f:if condition="{0:feed.raw.type}=={0:'video'}">
-			<img class="video-overlay" src="/typo3conf/ext/pb_social/Resources/Public/Icons/play_icon.png"/>
+            <img class="video-overlay lazyload"
+                 data-src="{f:uri.image(src: 'EXT:pb_social/Resources/Public/Icons/play_icon.png')}" />
 		</f:if>
 	</a>
 </f:if>

web/typo3conf/ext/ep_theme/Resources/Private/Partials/SocialMedia/Feed/Provider-instagram.html

@@ -1,5 +1,6 @@
-<a href="{feed.link}" target="_blank" class="pb-list-item pb-list-item-instagram pb-hidden socialmedia__item" data-type="" data-url="{feed.link}">
-	<div class="image" style="background-image: url({feed.image})"></div>
+<a href="{feed.link}" target="_blank" class="pb-list-item pb-list-item-instagram pb-hidden socialmedia__item"
+   data-type="" data-url="{feed.link}">
+	<div class="image lazyload" data-bg="{feed.image}"></div>
 	<f:if condition="{feed.text}">
 		<span class="text">{feed.text}</span>
 	</f:if>