diff --git a/package-lock.json b/package-lock.json index a2434463..4e5e6980 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ "font-awesome": "^4.7.0", "glightbox": "^3.0.9", "jquery": "^3.6.0", + "lazyframe": "^2.2.7", "lazysizes": "^4.1.8", "leaflet": "^1.7.1", "normalize.css": "^8.0.1", @@ -6178,6 +6179,11 @@ "node": ">= 8" } }, + "node_modules/lazyframe": { + "version": "2.2.7", + "resolved": "https://registry.npmjs.org/lazyframe/-/lazyframe-2.2.7.tgz", + "integrity": "sha512-S4Cj6r+8ePZnH0Izn8Y9+Ht0/xylcKwhXljOwllPI8u6zB9gq9j+9BlxeKx7TNP8W/lovek8s6xQD1sSq5dLDw==" + }, "node_modules/lazysizes": { "version": "4.1.8", "resolved": "https://registry.npmjs.org/lazysizes/-/lazysizes-4.1.8.tgz", @@ -15856,6 +15862,11 @@ "integrity": "sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==", "dev": true }, + "lazyframe": { + "version": "2.2.7", + "resolved": "https://registry.npmjs.org/lazyframe/-/lazyframe-2.2.7.tgz", + "integrity": "sha512-S4Cj6r+8ePZnH0Izn8Y9+Ht0/xylcKwhXljOwllPI8u6zB9gq9j+9BlxeKx7TNP8W/lovek8s6xQD1sSq5dLDw==" + }, "lazysizes": { "version": "4.1.8", "resolved": "https://registry.npmjs.org/lazysizes/-/lazysizes-4.1.8.tgz", diff --git a/package.json b/package.json index 717f85f6..af50eb83 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "font-awesome": "^4.7.0", "glightbox": "^3.0.9", "jquery": "^3.6.0", + "lazyframe": "^2.2.7", "lazysizes": "^4.1.8", "leaflet": "^1.7.1", "normalize.css": "^8.0.1", diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js index 97d47959..895c703c 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js @@ -7,6 +7,10 @@ require('picturefill') import smoothscroll from 'smoothscroll-polyfill' smoothscroll.polyfill() +// Video lazy loading +import lazyframe from 'lazyframe' +lazyframe('.lazyframe') + // Add pacode to external links document.addEventListener('DOMContentLoaded', () => { const configElement = document.getElementById('appconfig') diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss index d45c0ff5..632574a2 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss @@ -32,6 +32,7 @@ @import "components/teaser"; @import "components/tiles"; @import "components/tooltips"; + @import "~lazyframe/src/scss/lazyframe"; } @layer utilities { diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/YoutubeVideo.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/YoutubeVideo.html index 434ae064..d02f281e 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/YoutubeVideo.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/YoutubeVideo.html @@ -1,14 +1,15 @@ + xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers" + xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"> -
- +
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html index 2269af2b..fb8569a2 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html @@ -200,9 +200,10 @@ -
- +