Changed lazyload

This commit is contained in:
zeldaroot 2021-01-04 01:53:14 +02:00
parent e1f729cf91
commit a165f460b5
11 changed files with 12 additions and 61 deletions

View File

@ -40,7 +40,7 @@
<div class="item">
<a href="<%- movie.url %>">
<img src="<%- movie.poster_min %>" data-cinemapress-src="<%- movie.poster %>" alt="<%= movie.title %> (<%- movie.year %>)">
<img src="<%- movie.poster_min %>" class="lazy" data-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_min %>" data-cinemapress-src="<%- movie.poster %>" alt="<%= movie.title %> (<%- movie.year %>)">
<img src="<%- movie.poster_min %>" class="lazy" data-src="<%- movie.poster %>" alt="<%= movie.title %> (<%- movie.year %>)">
</div>
</div>
<div class="main-sliders-title">

View File

@ -153,7 +153,7 @@
category.movies.forEach(function (movie) { %>
<div class="item">
<a href="<%- movie.url %>">
<img src="<%- movie.poster_min %>" data-cinemapress-src="<%- movie.poster %>"
<img src="<%- movie.poster_min %>" class="lazy" data-src="<%- movie.poster %>"
alt="<%= movie.title %> (<%- movie.year %>)">
<div class="fullstory-slider-title"><%= movie.title %>
(<%- movie.year %>)

View File

@ -172,7 +172,7 @@
category.movies.forEach(function (movie) { %>
<div class="item">
<a href="<%- movie.url %>">
<img src="<%- movie.poster_min %>" data-cinemapress-src="<%- movie.poster %>"
<img src="<%- movie.poster_min %>" class="lazy" data-src="<%- movie.poster %>"
alt="<%= movie.title %> (<%- movie.year %>)">
<div class="fullstory-slider-title"><%= movie.title %>
(<%- movie.year %>)

View File

@ -74,55 +74,6 @@
</div>
</div>
<script>
(function() {
var dataAllSrc = document.querySelectorAll('[data-cinemapress-src],[data-cinemapress-bg-src]');
var dataAllSrcCount = (dataAllSrc && dataAllSrc.length) || 0;
if (!dataAllSrcCount) return;
var dataAllSrcCountComp = 0;
var fSrc = {
'dataCountImage': function() {
dataAllSrcCountComp = dataAllSrcCountComp+1;
if (dataAllSrcCount && dataAllSrcCountComp >= dataAllSrcCount) {
dataAllSrcCount = 0;
var st;
window.addEventListener('load', function() {
clearTimeout(st);
fSrc['checkLoad']('dataSetImage');
});
st = setTimeout(function() {
fSrc['checkLoad']('dataSetImage');
}, 5000);
}
},
'dataSetImage': function(el) {
var src = el.dataset.cinemapressSrc;
var bgSrc = el.dataset.cinemapressBgSrc;
if (!src && !bgSrc) return;
var img = new Image();
img.src = src ? src : bgSrc;
img.onload = function() {
if (src) { el.src = src; }
else { el.style.backgroundImage = 'url("' + bgSrc + '")';}
}
},
'checkLoad': function(fn) {
if (!dataAllSrc) return;
dataAllSrc.forEach(function(src) {
if (typeof src.complete === 'undefined' || src.complete) {
fSrc[fn](src);
} else {
src.addEventListener('load', function() {
fSrc[fn](this);
}, { once: true });
}
});
}
}
fSrc['checkLoad']('dataCountImage');
})();
</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>

View File

@ -98,7 +98,7 @@
<% slider.forEach(function (movie) { %>
<div class="item">
<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="lazy item-top-slider" style="background:url('<%- movie.picture_min %>') top center no-repeat; background-size: cover;" data-bg="<%- 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">

View File

@ -1,7 +1,7 @@
<div class="full-left">
<div class="full-poster">
<div class="cinemapress-poster">
<img src="<%- movie.poster_min %>" data-cinemapress-src="<%- movie.poster_big %>" alt="<%= page.title %>" title="<%= page.title %>"
<img src="<%- movie.poster_min %>" class="lazy" data-src="<%- movie.poster_big %>" 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_min %>" data-cinemapress-src="<%- movie.poster %>" alt="<%= movie.title %> (<%- movie.year %>)">
<img src="<%- movie.poster_min %>" class="lazy" data-src="<%- movie.poster %>" alt="<%= movie.title %> (<%- movie.year %>)">
<div class="fullstory-slider-title-scoro"><%= movie.title %> (<%- movie.year %>)</div>
</a>
</div>

View File

@ -92,7 +92,7 @@
</svg>
</a>
</span>
<img src="<%- movie.poster_min %>" data-cinemapress-src="<%- movie.poster %>"
<img src="<%- movie.poster_min %>" class="lazy" data-src="<%- movie.poster %>"
alt="<%= movie.title %> (<%- movie.year %>)"
style="height: 260px; width: 180px;">
</div>

View File

@ -182,7 +182,7 @@
category.movies.forEach(function (movie) { %>
<div class="item">
<a href="<%- movie.url %>">
<img src="<%- movie.poster_min %>" data-cinemapress-src="<%- movie.poster %>"
<img src="<%- movie.poster_min %>" class="lazy" data-src="<%- movie.poster %>"
alt="<%= movie.title %> (<%- movie.year %>)">
<div class="fullstory-slider-title"><%= movie.title %>(<%- movie.year %>)</div>
</a>

View File

@ -167,7 +167,7 @@
category.movies.forEach(function (movie) { %>
<div class="item">
<a href="<%- movie.url %>">
<img src="<%- movie.poster_min %>" data-cinemapress-src="<%- movie.poster %>"
<img src="<%- movie.poster_min %>" class="lazy" data-src="<%- movie.poster %>"
alt="<%= movie.title %> (<%- movie.year %>)">
<div class="fullstory-slider-title"><%= movie.title %>
(<%- movie.year %>)

View File

@ -136,7 +136,7 @@
category.movies.forEach(function (movie) { %>
<div class="item">
<a href="<%- movie.url %>">
<img src="<%- movie.poster_min %>" data-cinemapress-src="<%- movie.poster %>"
<img src="<%- movie.poster_min %>" class="lazy" data-src="<%- movie.poster %>"
alt="<%= movie.title %> (<%- movie.year %>)">
<div class="fullstory-slider-title"><%= movie.title %>
(<%- movie.year %>)

View File

@ -163,7 +163,7 @@
category.movies.forEach(function (movie) { %>
<div class="item">
<a href="<%- movie.url %>">
<img src="<%- movie.poster_min %>" data-cinemapress-src="<%- movie.poster %>"
<img src="<%- movie.poster_min %>" class="lazy" data-src="<%- movie.poster %>"
alt="<%= movie.title %> (<%- movie.year %>)">
<div class="fullstory-slider-title"><%= movie.title %>
(<%- movie.year %>)