EP/website-typo3
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Assign loading image to prevent reflow

Browse Source
This commit is contained in:
Björn Fromme
2019-09-12 19:45:53 +02:00
parent c4d3954962
commit de70e083c6
3 changed files with 16 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/TeaserWide.html
+4 -2
View File
@@ -115,8 +115,10 @@
<source media="(max-width: 768px)" data-srcset="{f:uri.image(image: image, width: '220', height: '130c-100')} 220w"/>
<source media="(max-width: 1200px)" data-srcset="{f:uri.image(image: image, width: '280', height: '220c-100')} 280w"/>
<source media="(min-width: 1201px)" data-srcset="{f:uri.image(image: image, width: '260', height: '200c-100')} 260w"/>
<img class="scale lazyload" data-src="{f:uri.image(image: image, width: '260', height: '200c-100')}"
title="{image.title}" alt="{image.alternative}">
<img class="scale lazyload" title="{image.title}" alt="{image.alternative}"
src="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/lazy.png', width: '260', height: '200')}"
data-src="{f:uri.image(image: image, width: '260', height: '200c-100')}"
>
</picture>
</f:if>
</f:section>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/TeaserImage.html
+8 -7
View File
@@ -16,9 +16,10 @@
<source media="(max-width: 512px)" data-srcset="{f:uri.image(
image: image, width: '350', height: '175c-100'
)} 350w"/>
<img class="scale lazyload" data-src="{f:uri.image(
image: image, width: '500', height: '250c-100'
)}" title="{image.title}" alt="{image.alternative}">
<img class="scale lazyload" title="{image.title}" alt="{image.alternative}"
src="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/lazy.png', width: '500', height: '250')}"
data-src="{f:uri.image(image: image, width: '500', height: '250c-100')}"
>
</picture>
</f:then>
<f:else>
@@ -43,10 +44,10 @@
src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
width: '350', height: '175c-100'
)} 320w"/>
<img class="scale lazyload" data-src="{f:uri.image(
src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
width: '500', height: '250c-100'
)}" title="" alt="">
<img class="scale lazyload" title="" alt=""
src="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/lazy.png', width: '500', height: '250')}"
data-src="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg', width: '500', height: '250c-100')}"
>
</picture>
</f:else>
</f:if>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/TeaserWideImage.html
+4 -3
View File
@@ -13,9 +13,10 @@
<source media="(max-width: 768px)" data-srcset="{f:uri.image(
image: image, width: '320', height: '140c-100'
)} 320w"/>
<img class="scale lazyload" data-src="{f:uri.image(
image: image, width: '260', height: '160c-100'
)}" title="{image.title}" alt="{image.alternative}">
<img class="scale lazyload" title="{image.title}" alt="{image.alternative}"
src="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/lazy.png', width: '260', height: '160')}"
data-src="{f:uri.image(image: image, width: '260', height: '160c-100')}"
>
</picture>
</f:then>
<f:else>