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

Replace jquery-lazy with lazysizes

Browse Source
This commit is contained in:
Björn Fromme
2018-11-13 18:18:43 +01:00
parent 07680a0c23
commit 79f46eaf48
21 changed files with 65 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+5 -8
View File
@@ -4920,14 +4920,6 @@
"resolved": "https://registry.npmjs.org/jquery/-/jquery-1.12.4.tgz",
"integrity": "sha1-AeHfuikP5z3rp3zurLD5ui/sngw="
},
"jquery-lazy": {
"version": "1.7.10",
"resolved": "https://registry.npmjs.org/jquery-lazy/-/jquery-lazy-1.7.10.tgz",
"integrity": "sha512-1vBpU+igfZJ58BrQrk2OFl3TMriGeIfZUg35uSIajZF4GcxF96NtdS3LbWk5a72rH2ypz0odTsAkqhUsICknhw==",
"requires": {
"jquery": ">=1.7.2"
}
},
"js-base64": {
"version": "2.4.9",
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.9.tgz",
@@ -5046,6 +5038,11 @@
"integrity": "sha1-odePw6UEdMuAhF07O24dpJpEbo4=",
"dev": true
},
"lazysizes": {
"version": "4.1.4",
"resolved": "https://registry.npmjs.org/lazysizes/-/lazysizes-4.1.4.tgz",
"integrity": "sha512-jVplgeHHoQ6a2RZtxCAKFAnm6QPQmEIKq4JWSTI1XfCBhn+CqDgMKWDJO81f8VtVBdAlHs+BzP2WGzMLUi3oFg=="
},
"lcid": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/lcid/-/lcid-1.0.0.tgz",
package.json
+1 -1
View File
@@ -19,7 +19,7 @@
"flatpickr": "^4.5.2",
"font-awesome": "^4.7.0",
"jquery": "^1.12.4",
"jquery-lazy": "^1.7.10",
"lazysizes": "^4.1.4",
"leaflet": "^1.3.4",
"normalize.css": "^7.0.0",
"picturefill": "^3.0.3",
web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js
+1 -10
View File
@@ -12,7 +12,7 @@ global.$ = global.jQuery = $;
require('cookieconsent');
require('slick-carousel');
require('jquery-lazy');
require('lazysizes');
require('bootstrap-sass/assets/javascripts/bootstrap');
require('picturefill');
require('leaflet');
@@ -292,13 +292,6 @@ new Vue({
$filterPanel.addClass('in');
}
},
initImageLazyLoading () {
$('.lazy').Lazy({
scrollDirection: 'vertical',
effect: 'fadeIn',
visibleOnly: true
});
},
initPartnerIdSelect () {
$('[data-force-partnerid-select]').on('click', '.booking-link', function (e) {
e.preventDefault();
@@ -377,7 +370,6 @@ new Vue({
Vue.nextTick(() => {
this.initContentsliders();
this.initTooltips();
this.initImageLazyLoading();
this.initFilterpanel();
this.appendPaCode();
});
@@ -422,7 +414,6 @@ new Vue({
this.initContentsliders();
this.initPhoneLinks();
this.initTooltips();
this.initImageLazyLoading();
this.initDropdownMenuBehavior();
this.initPartnerIdSelect();
this.initFaqFilter();
web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/SearchResultItem.vue
+4 -4
View File
@@ -5,10 +5,10 @@
<referrer-link :href="item.detailPageUri" :referring-page="referringPage"
rel="nofollow" title="Details &amp; Buchen">
<picture class="searchresult-item__image">
<source media="(max-width: 768px)" :srcset="item.hotel.images.resized.s[0].url + ' 220w'"/>
<source media="(max-width: 1200px)" :srcset="item.hotel.images.resized.l[0].url + ' 280w'"/>
<source media="(min-width: 1201px)" :srcset="item.hotel.images.resized.m[0].url + ' 260w'"/>
<img class="scale" :src="item.hotel.images.resized.s[0].url"
<source media="(max-width: 768px)" :data-srcset="item.hotel.images.resized.s[0].url + ' 220w'"/>
<source media="(max-width: 1200px)" :data-srcset="item.hotel.images.resized.l[0].url + ' 280w'"/>
<source media="(min-width: 1201px)" :data-srcset="item.hotel.images.resized.m[0].url + ' 260w'"/>
<img class="scale lazyload" :data-src="item.hotel.images.resized.s[0].url"
:title="item.hotel.images.resized.s[0].title"
:alt="item.hotel.images.resized.s[0].alt">
</picture>
web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/_base.scss
+1 -1
View File
@@ -121,7 +121,7 @@ a.anchor:target {
}
// Image lazy loading placeholder
img.lazy {
img.lazyloading {
background: url(../images/lazy.png) no-repeat top center;
}
web/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Large.html
+1 -1
View File
@@ -11,7 +11,7 @@
<div class="col-md-6">
<f:if condition="{teaserImage}">
<f:then>
<img class="lazy" data-src="{f:uri.image(image: teaserImage, width: '400', height: '400c')}"
<img class="lazyload" data-src="{f:uri.image(image: teaserImage, width: '400', height: '400c')}"
alt="{teaserImage.alternative}" title="{teaserImage.title}">
</f:then>
<f:else>
web/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Reminder.html
+1 -1
View File
@@ -11,7 +11,7 @@
<a href="{f:uri.typolink(parameter: button.container.link)}" title="{button.container.label -> f:format.raw()}">
<f:if condition="{teaserImage}">
<f:then>
<img class="scale lazy" data-src="{f:uri.image(image: teaserImage, width: '400')}"
<img class="scale lazyload" data-src="{f:uri.image(image: teaserImage, width: '400')}"
alt="{teaserImage.alternative}" title="{teaserImage.title}">
</f:then>
<f:else>
web/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Small.html
+1 -1
View File
@@ -11,7 +11,7 @@
<div class="col-sm-2">
<f:if condition="{teaserImage}">
<f:then>
<img class="scale lazy" data-src="{f:uri.image(image: teaserImage, width: '400', height: '400c')}"
<img class="scale lazyload" data-src="{f:uri.image(image: teaserImage, width: '400', height: '400c')}"
alt="{teaserImage.alternative}" title="{teaserImage.title}">
</f:then>
<f:else>
web/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/TeaserWide.html
+8 -8
View File
@@ -109,16 +109,16 @@
<f:then>
<f:alias map="{image: item.hotel.images.original.0}">
<picture class="searchresult-item__image">
<source media="(max-width: 768px)" srcset="{f:uri.image(
<source media="(max-width: 768px)" data-srcset="{f:uri.image(
image: image, width: '220', height: '130c-100'
)} 220w"/>
<source media="(max-width: 1200px)" srcset="{f:uri.image(
<source media="(max-width: 1200px)" data-srcset="{f:uri.image(
image: image, width: '280', height: '220c-100'
)} 280w"/>
<source media="(min-width: 1201px)" srcset="{f:uri.image(
<source media="(min-width: 1201px)" data-srcset="{f:uri.image(
image: image, width: '260', height: '200c-100'
)} 260w"/>
<img class="scale" src="{f:uri.image(
<img class="scale lazyload" data-src="{f:uri.image(
image: image, width: '260', height: '200c-100'
)}" title="{image.title}" alt="{image.alternative}">
</picture>
@@ -126,19 +126,19 @@
</f:then>
<f:else>
<picture class="searchresult-item__image">
<source media="(max-width: 768px)" srcset="{f:uri.image(
<source media="(max-width: 768px)" data-srcset="{f:uri.image(
src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
width: '220', height: '130c-100'
)} 220w"/>
<source media="(max-width: 1200px)" srcset="{f:uri.image(
<source media="(max-width: 1200px)" data-srcset="{f:uri.image(
src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
width: '280', height: '220c-100'
)} 280w"/>
<source media="(min-width: 1201px)" srcset="{f:uri.image(
<source media="(min-width: 1201px)" data-srcset="{f:uri.image(
src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
width: '260', height: '200c-100'
)} 260w"/>
<img class="scale" src="{f:uri.image(
<img class="scale lazyload" data-src="{f:uri.image(
src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
width: '260', height: '200c-100'
)}" title="" alt="">
web/typo3conf/ext/ep_theme/Resources/Private/Partials/News/List/Item.html
+8 -8
View File
@@ -10,20 +10,20 @@
<f:then>
<f:if condition="{newsItem.mediaPreviews.0}">
<f:alias map="{mediaElement: '{newsItem.mediaPreviews.0}'}">
<f:image image="{mediaElement}" title="{mediaElement.originalResource.title}"
crop="{mediaElement.crop}"
width="640" height="360c+50"
alt="{mediaElement.originalResource.alternative}" class="scale"/>
<img class="scale lazyload"
data-src="{f:uri.image(image: mediaElement, crop: mediaElement.crop, width: '640', height: '360c+50')}"
alt="{mediaElement.originalResource.alternative}"
title="{mediaElement.originalResource.title}">
</f:alias>
</f:if>
</f:then>
<f:else>
<f:if condition="{newsItem.media}">
<f:alias map="{mediaElement: '{newsItem.media.0}'}">
<f:image image="{mediaElement}" title="{mediaElement.originalResource.title}"
crop="{mediaElement.crop}"
width="640" height="360c+50"
alt="{mediaElement.originalResource.alternative}" class="scale"/>
<img class="scale lazyload"
data-src="{f:uri.image(image: mediaElement, crop: mediaElement.crop, width: '640', height: '360c+50')}"
alt="{mediaElement.originalResource.alternative}"
title="{mediaElement.originalResource.title}">
</f:alias>
</f:if>
</f:else>
web/typo3conf/ext/ep_theme/Resources/Private/Partials/Officetip.html
+3 -1
View File
@@ -5,7 +5,9 @@
<p><strong>Officetipp</strong></p>
<f:if condition="{officetip.author.image}">
<f:then>
<f:image src="{officetip.author.image.uid}" treatIdAsReference="1" crop="{officetip.author.image.crop}" width="120" class="img-responsive" alt="{officetip.author.name}" />
<img data-src="{f:uri.image(image: officetip.author.image, crop: officetip.author.image.crop, width: '120')}"
class="img-responsive lazyload"
alt="{officetip.author.name}">
</f:then>
<f:else>
<img src="https://placehold.it/120x160" class="img-responsive" alt="{officetip.author.name}">
web/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/TeaserWide.html
+4 -4
View File
@@ -112,10 +112,10 @@
<f:section name="PictureTag">
<f:if condition="{image}">
<picture class="searchresult-item__image">
<source media="(max-width: 768px)" srcset="{f:uri.image(image: image, width: '220', height: '130c-100')} 220w"/>
<source media="(max-width: 1200px)" srcset="{f:uri.image(image: image, width: '280', height: '220c-100')} 280w"/>
<source media="(min-width: 1201px)" srcset="{f:uri.image(image: image, width: '260', height: '200c-100')} 260w"/>
<img class="scale" src="{f:uri.image(image: image, width: '260', height: '200c-100')}"
<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}">
</picture>
</f:if>
web/typo3conf/ext/ep_theme/Resources/Private/Partials/RegionMaps.html
+1 -1
View File
@@ -6,7 +6,7 @@
<a href="{f:uri.image(src: '{regionMap.uid}', treatIdAsReference: '1', maxWidth: '2560')}"
data-fancybox="regionmap-{region.uid}" data-caption="Pistenplan {region.name}"
title="Pistenplan {region.name}">
<img class="img-responsive lazy"
<img class="img-responsive lazyload"
data-src="{f:uri.image(image: regionMap, width: '330')}"
alt="{regionMap.alternative}"
title="{regionMap.title}">
web/typo3conf/ext/ep_theme/Resources/Private/Partials/Teamer.html
+3 -1
View File
@@ -6,7 +6,9 @@
<div>
<f:if condition="{teamerInCharge.image}">
<f:then>
<f:image src="{teamerInCharge.image.uid}" treatIdAsReference="1" crop="{teamerInCharge.image.crop}" width="330" class="img-responsive" alt="{teamerInCharge.name}" />
<img data-src="{f:uri.image(image: teamerInCharge.image, crop: teamerInCharge.image.crop, width: '330')}"
class="img-responsive lazyload"
alt="{teamerInCharge.name}">
</f:then>
<f:else>
<img src="https://placehold.it/330x248" class="img-responsive" alt="{teamerInCharge.name}">
web/typo3conf/ext/ep_theme/Resources/Private/Partials/TeaserImage.html
+12 -12
View File
@@ -1,49 +1,49 @@
<f:if condition="{image.uid}">
<f:then>
<picture>
<source media="(max-width: 512px)" srcset="{f:uri.image(
<source media="(max-width: 512px)" data-srcset="{f:uri.image(
image: image, width: '350', height: '175c-100'
)} 350w"/>
<source media="(max-width: 768px)" srcset="{f:uri.image(
<source media="(max-width: 768px)" data-srcset="{f:uri.image(
image: image, width: '500', height: '250c-100'
)} 500w"/>
<source media="(max-width: 991px)" srcset="{f:uri.image(
<source media="(max-width: 991px)" data-srcset="{f:uri.image(
image: image, width: '360', height: '200c-100'
)} 360w"/>
<source media="(max-width: 1200px)" srcset="{f:uri.image(
<source media="(max-width: 1200px)" data-srcset="{f:uri.image(
image: image, width: '320', height: '160c-100'
)} 320w"/>
<source media="(min-width: 1201px)" srcset="{f:uri.image(
<source media="(min-width: 1201px)" data-srcset="{f:uri.image(
image: image, width: '370', height: '220c-100'
)} 370w"/>
<img class="scale" srcset="{f:uri.image(
<img class="scale lazyload" data-src="{f:uri.image(
image: image, width: '500', height: '250c-100'
)}" title="{image.title}" alt="{image.alternative}">
</picture>
</f:then>
<f:else>
<picture>
<source media="(max-width: 512px)" srcset="{f:uri.image(
<source media="(max-width: 512px)" data-srcset="{f:uri.image(
src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
width: '350', height: '175c-100'
)} 320w"/>
<source media="(max-width: 768px)" srcset="{f:uri.image(
<source media="(max-width: 768px)" data-srcset="{f:uri.image(
src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
width: '500', height: '250c-100'
)} 500w"/>
<source media="(max-width: 991px)" srcset="{f:uri.image(
<source media="(max-width: 991px)" data-srcset="{f:uri.image(
src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
width: '360', height: '200c-100'
)} 360w"/>
<source media="(max-width: 1200px)" srcset="{f:uri.image(
<source media="(max-width: 1200px)" data-srcset="{f:uri.image(
src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
width: '320', height: '160c-100'
)} 420w"/>
<source media="(min-width: 1201px)" srcset="{f:uri.image(
<source media="(min-width: 1201px)" data-srcset="{f:uri.image(
src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
width: '370', height: '220c-100'
)} 370w"/>
<img class="scale" srcset="{f:uri.image(
<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="">
web/typo3conf/ext/ep_theme/Resources/Private/Partials/TeaserWideImage.html
+5 -5
View File
@@ -1,19 +1,19 @@
<f:if condition="{image}">
<f:then>
<picture class="product-teaser__image">
<source media="(max-width: 768px)" srcset="{f:uri.image(
<source media="(max-width: 768px)" data-srcset="{f:uri.image(
image: image, width: '320', height: '140c-100'
)} 320w"/>
<source media="(max-width: 991px)" srcset="{f:uri.image(
<source media="(max-width: 991px)" data-srcset="{f:uri.image(
image: image, width: '260', height: '220c-100'
)} 260w"/>
<source media="(max-width: 1200px)" srcset="{f:uri.image(
<source media="(max-width: 1200px)" data-srcset="{f:uri.image(
image: image, width: '220', height: '130c-100'
)} 220w"/>
<source media="(min-width: 1201px)" srcset="{f:uri.image(
<source media="(min-width: 1201px)" data-srcset="{f:uri.image(
image: image, width: '320', height: '200c-100'
)} 320w"/>
<img class="scale" srcset="{f:uri.image(
<img class="scale lazyload" data-src="{f:uri.image(
image: image, width: '260', height: '160c-100'
)}" title="{image.title}" alt="{image.alternative}">
</picture>
web/typo3conf/ext/ep_theme/Resources/Private/Partials/Textmedia/Default.html
+1 -1
View File
@@ -8,7 +8,7 @@
{data.bodytext -> f:format.html()}
<f:if condition="{files}">
<f:link.typolink parameter="{files.0.link}">
<img class="img-responsive lazy"
<img class="img-responsive lazyload"
data-src="{f:uri.image(image: files.0, maxWidth: '770')}"
alt="{files.0.originalResource.alternative}"
title="{files.0.originalResource.title}"
web/typo3conf/ext/ep_theme/Resources/Private/Partials/Textmedia/Partnerlogos.html
+1 -1
View File
@@ -24,7 +24,7 @@
<f:section name="Image">
<div class="partnerlogo {cssClasses}">
<f:link.typolink parameter="{image.link}">
<img class="lazy img-responsive partnerlogo__image"
<img class="lazyload img-responsive partnerlogo__image"
data-src="{f:uri.image(image: image, width: '400c', height: '400')}"
alt="{image.alternative}" title="{image.title}">
</f:link.typolink>
web/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/Lineup.html
+1 -1
View File
@@ -11,7 +11,7 @@
<f:for each="{items}" as="item" iteration="iteration">
<div class="row ep-lineup{f:if(condition: iteration.isEven, then: ' right')}">
<div class="col-md-6">
<img class="scale lazy" data-src="{f:uri.image(image: item.image.0)}" alt="{item.data.name}"/>
<img class="scale lazyload" data-src="{f:uri.image(image: item.image.0)}" alt="{item.data.name}"/>
</div>
<div class="col-md-6 ">
<div>
web/typo3conf/ext/ep_theme/Resources/Private/Templates/Team/List.html
+2 -1
View File
@@ -31,7 +31,8 @@
<div>
<f:if condition="{member.image}">
<f:then>
<f:image src="{member.image.uid}" treatIdAsReference="1" crop="{member.image.crop}" width="400" height="400c" title="{member.name}" alt="{member.name}"/>
<img data-src="{f:uri.image(image: member.image, width: '400', height: '400c')}"
class="lazyload" title="{member.name}" alt="{member.name}">
</f:then>
<f:else>
<img src="https://placehold.it/400x400" alt="{member.name}">
webpack.config.js
+1 -1
View File
@@ -10,7 +10,7 @@ Encore
.addEntry('unichamp', './web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/unichamp.js')
.addStyleEntry('rte', './web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/rte.scss')
.createSharedEntry('vendor', [
'jquery', 'vue', 'vue-session', 'vuex', 'vue-router', 'axios', 'flatpickr', 'jquery-lazy',
'jquery', 'vue', 'vue-session', 'vuex', 'vue-router', 'axios', 'flatpickr', 'lazysizes',
'bootstrap-sass/assets/javascripts/bootstrap', 'slick-carousel',
'dayjs', 'cookieconsent', 'picturefill', '@fancyapps/fancybox', 'leaflet'
])