Added lazy loading for high quality images
This commit is contained in:
parent
659b3bd402
commit
4b6c299ec4
|
@ -40,7 +40,7 @@
|
|||
|
||||
<div class="item">
|
||||
<a href="<%- movie.url %>">
|
||||
<img src="<%- movie.poster %>" alt="<%= movie.title %> (<%- movie.year %>)">
|
||||
<img src="<%- movie.poster_min %>" data-cinemapress-src="<%- movie.poster %>" alt="<%= movie.title %> (<%- movie.year %>)">
|
||||
<div class="fullstory-slider-title"><%= movie.title %> (<%- movie.year %>)</div>
|
||||
</a>
|
||||
</div>
|
||||
|
@ -173,7 +173,7 @@
|
|||
viewBox="83.1 54.3 61.5 73.1"><polygon
|
||||
points="83.1,54.3 83.1,127.4 144.7,90.9"></polygon></svg></a>
|
||||
</span>
|
||||
<img src="<%- movie.poster %>" alt="<%= movie.title %> (<%- movie.year %>)">
|
||||
<img src="<%- movie.poster_min %>" data-cinemapress-src="<%- movie.poster %>" alt="<%= movie.title %> (<%- movie.year %>)">
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-sliders-title">
|
||||
|
|
|
@ -153,7 +153,7 @@
|
|||
category.movies.forEach(function (movie) { %>
|
||||
<div class="item">
|
||||
<a href="<%- movie.url %>">
|
||||
<img src="<%- movie.poster %>"
|
||||
<img src="<%- movie.poster_min %>" data-cinemapress-src="<%- movie.poster %>"
|
||||
alt="<%= movie.title %> (<%- movie.year %>)">
|
||||
<div class="fullstory-slider-title"><%= movie.title %>
|
||||
(<%- movie.year %>)
|
||||
|
|
|
@ -172,7 +172,7 @@
|
|||
category.movies.forEach(function (movie) { %>
|
||||
<div class="item">
|
||||
<a href="<%- movie.url %>">
|
||||
<img src="<%- movie.poster %>"
|
||||
<img src="<%- movie.poster_min %>" data-cinemapress-src="<%- movie.poster %>"
|
||||
alt="<%= movie.title %> (<%- movie.year %>)">
|
||||
<div class="fullstory-slider-title"><%= movie.title %>
|
||||
(<%- movie.year %>)
|
||||
|
|
|
@ -74,6 +74,21 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.addEventListener('DOMContentLoaded', function(e) {
|
||||
var dataCinemapressSrc = document.querySelectorAll('[data-cinemapress-src]');
|
||||
if (!dataCinemapressSrc) return;
|
||||
dataCinemapressSrc.forEach(function(cinemapressSrc) {
|
||||
cinemapressSrc.src = cinemapressSrc.dataset.cinemapressSrc;
|
||||
});
|
||||
var dataCinemapressBgSrc = document.querySelectorAll('[data-cinemapress-bg-src]');
|
||||
if (!dataCinemapressBgSrc) return;
|
||||
dataCinemapressBgSrc.forEach(function(cinemapressBgSrc) {
|
||||
cinemapressBgSrc.style.backgroundImage = 'url("' + cinemapressBgSrc.dataset.cinemapressBgSrc + '")';
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<script defer src="/themes/<%- page.theme %>/public/js/all.min.js"></script>
|
||||
|
||||
<script src="//ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
|
||||
|
|
|
@ -98,8 +98,7 @@
|
|||
<% slider.forEach(function (movie) { %>
|
||||
|
||||
<div class="item">
|
||||
<div class="item-top-slider"
|
||||
style="background:url('<%- movie.picture %>') top center no-repeat; background-size: cover;">
|
||||
<div class="item-top-slider" style="background:url('<%- movie.picture_min %>') top center no-repeat; background-size: cover;" data-cinemapress-bg-src="<%- movie.picture %>">
|
||||
<div class="item-top-slider1">
|
||||
<a href="<%- movie.url %>" class="top-slider-link">
|
||||
<svg viewBox="83.1 54.3 61.5 73.1">
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<div class="full-left">
|
||||
<div class="full-poster">
|
||||
<div class="cinemapress-poster">
|
||||
<img src="<%- movie.poster %>" alt="<%= page.title %>" title="<%= page.title %>"
|
||||
<img src="<%- movie.poster_min %>" data-cinemapress-src="<%- movie.poster %>" alt="<%= page.title %>" title="<%= page.title %>"
|
||||
data-cinemapress-poster="<%- movie.poster %>">
|
||||
<% if (movie.quality) { %>
|
||||
<div class="cinemapress-quality">
|
||||
|
@ -67,7 +67,7 @@
|
|||
<% soon.forEach(function (movie) { %>
|
||||
<div class="item-scoro">
|
||||
<a href="<%- movie.url %>">
|
||||
<img src="<%- movie.poster %>" alt="<%= movie.title %> (<%- movie.year %>)">
|
||||
<img src="<%- movie.poster_min %>" data-cinemapress-src="<%- movie.poster %>" alt="<%= movie.title %> (<%- movie.year %>)">
|
||||
<div class="fullstory-slider-title-scoro"><%= movie.title %> (<%- movie.year %>)</div>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
@ -92,7 +92,7 @@
|
|||
</svg>
|
||||
</a>
|
||||
</span>
|
||||
<img src="<%- movie.poster %>"
|
||||
<img src="<%- movie.poster_min %>" data-cinemapress-src="<%- movie.poster %>"
|
||||
alt="<%= movie.title %> (<%- movie.year %>)"
|
||||
style="height: 260px; width: 180px;">
|
||||
</div>
|
||||
|
|
|
@ -182,7 +182,7 @@
|
|||
category.movies.forEach(function (movie) { %>
|
||||
<div class="item">
|
||||
<a href="<%- movie.url %>">
|
||||
<img src="<%- movie.poster %>"
|
||||
<img src="<%- movie.poster_min %>" data-cinemapress-src="<%- movie.poster %>"
|
||||
alt="<%= movie.title %> (<%- movie.year %>)">
|
||||
<div class="fullstory-slider-title"><%= movie.title %>(<%- movie.year %>)</div>
|
||||
</a>
|
||||
|
|
|
@ -167,7 +167,7 @@
|
|||
category.movies.forEach(function (movie) { %>
|
||||
<div class="item">
|
||||
<a href="<%- movie.url %>">
|
||||
<img src="<%- movie.poster %>"
|
||||
<img src="<%- movie.poster_min %>" data-cinemapress-src="<%- movie.poster %>"
|
||||
alt="<%= movie.title %> (<%- movie.year %>)">
|
||||
<div class="fullstory-slider-title"><%= movie.title %>
|
||||
(<%- movie.year %>)
|
||||
|
|
|
@ -136,7 +136,7 @@
|
|||
category.movies.forEach(function (movie) { %>
|
||||
<div class="item">
|
||||
<a href="<%- movie.url %>">
|
||||
<img src="<%- movie.poster %>"
|
||||
<img src="<%- movie.poster_min %>" data-cinemapress-src="<%- movie.poster %>"
|
||||
alt="<%= movie.title %> (<%- movie.year %>)">
|
||||
<div class="fullstory-slider-title"><%= movie.title %>
|
||||
(<%- movie.year %>)
|
||||
|
|
|
@ -163,7 +163,7 @@
|
|||
category.movies.forEach(function (movie) { %>
|
||||
<div class="item">
|
||||
<a href="<%- movie.url %>">
|
||||
<img src="<%- movie.poster %>"
|
||||
<img src="<%- movie.poster_min %>" data-cinemapress-src="<%- movie.poster %>"
|
||||
alt="<%= movie.title %> (<%- movie.year %>)">
|
||||
<div class="fullstory-slider-title"><%= movie.title %>
|
||||
(<%- movie.year %>)
|
||||
|
|
Loading…
Reference in New Issue