Changed lazyload

This commit is contained in:
zeldaroot 2021-01-04 01:53:35 +02:00
parent b13cd521b7
commit 7fb775493f
11 changed files with 13 additions and 62 deletions

View File

@ -108,10 +108,10 @@
<li>
<a href="<%- movie.url %>" title="<%= movie.title %>">
<div class="cinemapress-poster">
<img src="<%- movie.poster_min %>" data-cinemapress-src="<%- movie.poster %>"
<img src="<%- movie.poster_min %>" data-src="<%- movie.poster %>"
alt="<%= movie.title %> (<%- movie.year %>)"
title="<%= movie.title %> (<%- movie.year %>)"
class="okrug">
class="lazy okrug">
<% if (movie.quality) { %>
<div class="cinemapress-quality">
<span class="cinemapress-svg-quality"

View File

@ -145,7 +145,7 @@
<li>
<a href="<%- movie.url %>" class="brost"
title="<%= movie.title %> (<%- movie.year %>)">
<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:170px; width:115px;">
<%= movie.title %> (<%- movie.year %>)

View File

@ -164,7 +164,7 @@
<li>
<a href="<%- movie.url %>" class="brost"
title="<%= movie.title %> (<%- movie.year %>)">
<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:170px; width:115px;">
<%= movie.title %> (<%- movie.year %>)

View File

@ -32,55 +32,6 @@
<% } %>
</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 src="/themes/<%- page.theme %>/public/js/all.min.js"></script>
<script src="/themes/default/public/desktop/js/yastatic.net/es5-shims.min.js"></script>

View File

@ -22,7 +22,7 @@
<a href="<%- movie.url %>" class="thumbnail"
title="<%= movie.title %> (<%- movie.year %>)">
<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 %>)"
style="max-width:100%;">
<div class="text_filmsss text_filmsss_top"><%= movie.title %></div>
</a>

View File

@ -120,7 +120,7 @@
<li>
<a href="<%- movie.url %>" class="brost" title="<%= movie.title %> (<%- movie.year %>)">
<img class="ghost" src="<%- movie.poster_min %>" data-cinemapress-src="<%- movie.poster %>"
<img class="lazy ghost" src="<%- movie.poster_min %>" data-src="<%- movie.poster %>"
alt="<%= movie.title %> (<%- movie.year %>)"/>
<span><%= movie.title %> (<%- movie.year %>)</span>
</a>

View File

@ -72,10 +72,10 @@
<a href="<%- movie.url %>"
title="<%= movie.title %>">
<div class="cinemapress-poster">
<img src="<%- movie.poster_min %>" data-cinemapress-src="<%- movie.poster %>"
<img src="<%- movie.poster_min %>" data-src="<%- movie.poster %>"
alt="<%= movie.title %> (<%- movie.year %>)"
title="<%= movie.title %> (<%- movie.year %>)"
class="okrug">
class="lazy okrug">
<% if (movie.quality) { %>
<div class="cinemapress-quality">
<span class="cinemapress-svg-quality"

View File

@ -55,7 +55,7 @@
<div class="vozmojnosti"><i><strong><%- page.title %></strong></i></div>
<div>
<div class="short_img">
<img src="<%- movie.poster_min %>" data-cinemapress-src="<%- movie.poster %>" alt="<%= page.title %>" title="<%= page.title %>"
<img src="<%- movie.poster_min %>" class="lazy" data-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_min %>" data-cinemapress-src="<%- movie.poster %>"
<img src="<%- movie.poster_min %>" class="lazy" data-src="<%- movie.poster %>"
alt="<%= movie.title %> (<%- movie.year %>)"
style="height:170px; width:115px;">
<%= movie.title %> (<%- movie.year %>)

View File

@ -167,7 +167,7 @@
<li>
<a href="<%- movie.url %>" class="brost"
title="<%= movie.title %> (<%- movie.year %>)">
<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:170px; width:115px;">
<%= movie.title %> (<%- movie.year %>)

View File

@ -145,7 +145,7 @@
<li>
<a href="<%- movie.url %>" class="brost"
title="<%= movie.title %> (<%- movie.year %>)">
<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:170px; width:115px;">
<%= movie.title %> (<%- movie.year %>)

View File

@ -145,7 +145,7 @@
<li>
<a href="<%- movie.url %>" class="brost"
title="<%= movie.title %> (<%- movie.year %>)">
<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:170px; width:115px;">
<%= movie.title %> (<%- movie.year %>)