Added lazy loading for high quality images
This commit is contained in:
parent
fd44db40a8
commit
b9bd412169
|
@ -108,7 +108,7 @@
|
|||
<li>
|
||||
<a href="<%- movie.url %>" title="<%= movie.title %>">
|
||||
<div class="cinemapress-poster">
|
||||
<img src="<%- movie.poster %>"
|
||||
<img src="<%- movie.poster_min %>" data-cinemapress-src="<%- movie.poster %>"
|
||||
alt="<%= movie.title %> (<%- movie.year %>)"
|
||||
title="<%= movie.title %> (<%- movie.year %>)"
|
||||
class="okrug">
|
||||
|
|
|
@ -145,7 +145,7 @@
|
|||
<li>
|
||||
<a href="<%- movie.url %>" class="brost"
|
||||
title="<%= movie.title %> (<%- movie.year %>)">
|
||||
<img src="<%- movie.poster %>"
|
||||
<img src="<%- movie.poster_min %>" data-cinemapress-src="<%- movie.poster %>"
|
||||
alt="<%= movie.title %> (<%- movie.year %>)"
|
||||
style="height:170px; width:115px;">
|
||||
<%= movie.title %> (<%- movie.year %>)
|
||||
|
|
|
@ -164,7 +164,7 @@
|
|||
<li>
|
||||
<a href="<%- movie.url %>" class="brost"
|
||||
title="<%= movie.title %> (<%- movie.year %>)">
|
||||
<img src="<%- movie.poster %>"
|
||||
<img src="<%- movie.poster_min %>" data-cinemapress-src="<%- movie.poster %>"
|
||||
alt="<%= movie.title %> (<%- movie.year %>)"
|
||||
style="height:170px; width:115px;">
|
||||
<%= movie.title %> (<%- movie.year %>)
|
||||
|
|
|
@ -32,6 +32,21 @@
|
|||
<% } %>
|
||||
</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 src="/themes/<%- page.theme %>/public/js/all.min.js"></script>
|
||||
|
||||
<script src="/themes/default/public/desktop/js/yastatic.net/es5-shims.min.js"></script>
|
||||
|
|
|
@ -22,7 +22,7 @@
|
|||
|
||||
<a href="<%- movie.url %>" class="thumbnail"
|
||||
title="<%= movie.title %> (<%- movie.year %>)">
|
||||
<img src="<%- movie.poster %>" alt="<%= movie.title %> (<%- movie.year %>)"
|
||||
<img src="<%- movie.poster_min %>" data-cinemapress-src="<%- movie.poster %>" alt="<%= movie.title %> (<%- movie.year %>)"
|
||||
style="max-width:100%;">
|
||||
<div class="text_filmsss text_filmsss_top"><%= movie.title %></div>
|
||||
</a>
|
||||
|
|
|
@ -120,7 +120,7 @@
|
|||
|
||||
<li>
|
||||
<a href="<%- movie.url %>" class="brost" title="<%= movie.title %> (<%- movie.year %>)">
|
||||
<img class="ghost" src="<%- movie.poster %>"
|
||||
<img class="ghost" src="<%- movie.poster_min %>" data-cinemapress-src="<%- movie.poster %>"
|
||||
alt="<%= movie.title %> (<%- movie.year %>)"/>
|
||||
<span><%= movie.title %> (<%- movie.year %>)</span>
|
||||
</a>
|
||||
|
|
|
@ -72,7 +72,7 @@
|
|||
<a href="<%- movie.url %>"
|
||||
title="<%= movie.title %>">
|
||||
<div class="cinemapress-poster">
|
||||
<img src="<%- movie.poster %>"
|
||||
<img src="<%- movie.poster_min %>" data-cinemapress-src="<%- movie.poster %>"
|
||||
alt="<%= movie.title %> (<%- movie.year %>)"
|
||||
title="<%= movie.title %> (<%- movie.year %>)"
|
||||
class="okrug">
|
||||
|
|
|
@ -55,7 +55,7 @@
|
|||
<div class="vozmojnosti"><i><strong><%- page.title %></strong></i></div>
|
||||
<div>
|
||||
<div class="short_img">
|
||||
<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 %>">
|
||||
<p style="text-align: justify">
|
||||
<%- movie.description %>
|
||||
|
@ -236,7 +236,7 @@
|
|||
<li>
|
||||
<a href="<%- movie.url %>" class="brost"
|
||||
title="<%= movie.title %> (<%- movie.year %>)">
|
||||
<img src="<%- movie.poster %>"
|
||||
<img src="<%- movie.poster_min %>" data-cinemapress-src="<%- movie.poster %>"
|
||||
alt="<%= movie.title %> (<%- movie.year %>)"
|
||||
style="height:170px; width:115px;">
|
||||
<%= movie.title %> (<%- movie.year %>)
|
||||
|
|
|
@ -167,7 +167,7 @@
|
|||
<li>
|
||||
<a href="<%- movie.url %>" class="brost"
|
||||
title="<%= movie.title %> (<%- movie.year %>)">
|
||||
<img src="<%- movie.poster %>"
|
||||
<img src="<%- movie.poster_min %>" data-cinemapress-src="<%- movie.poster %>"
|
||||
alt="<%= movie.title %> (<%- movie.year %>)"
|
||||
style="height:170px; width:115px;">
|
||||
<%= movie.title %> (<%- movie.year %>)
|
||||
|
|
|
@ -145,7 +145,7 @@
|
|||
<li>
|
||||
<a href="<%- movie.url %>" class="brost"
|
||||
title="<%= movie.title %> (<%- movie.year %>)">
|
||||
<img src="<%- movie.poster %>"
|
||||
<img src="<%- movie.poster_min %>" data-cinemapress-src="<%- movie.poster %>"
|
||||
alt="<%= movie.title %> (<%- movie.year %>)"
|
||||
style="height:170px; width:115px;">
|
||||
<%= movie.title %> (<%- movie.year %>)
|
||||
|
|
|
@ -145,7 +145,7 @@
|
|||
<li>
|
||||
<a href="<%- movie.url %>" class="brost"
|
||||
title="<%= movie.title %> (<%- movie.year %>)">
|
||||
<img src="<%- movie.poster %>"
|
||||
<img src="<%- movie.poster_min %>" data-cinemapress-src="<%- movie.poster %>"
|
||||
alt="<%= movie.title %> (<%- movie.year %>)"
|
||||
style="height:170px; width:115px;">
|
||||
<%= movie.title %> (<%- movie.year %>)
|
||||
|
|
Loading…
Reference in New Issue