DLE Ленивая загрузка (lazyload) img, video, source, iframe в dle 13.2

Все в курсе, что в ДЛЕ 13,2 появился скрипт lazyload.

Код:

/* Lazy Load XT 1.1.0 | MIT License */

На гитхабе исходники и инструкция - ressio/lazy-load-xt

В общем, у этого скрипта есть несколько вариаций, в том числе и для медиа тегов video, source, iframe. Целсофт же добавил в ДЛЕ только версию для тега img. Чтобы это исправить нужно в файле ДЛЕ /engine/classes/js/lazyload.js заменить на содержимое файла jquery.lazyloadxt.extra.min.js, код файла:

Код:

/* Lazy Load XT 1.1.0 | MIT License */
!function(a,b,c,d){function e(a,b){return a[b]===d?t[b]:a[b]}function f(){var a=b.pageYOffset;return a===d?r.scrollTop:a}function g(a,b){var c=t["on"+a];c&&(w(c)?c.call(b[0]):(c.addClass&&b.addClass(c.addClass),c.removeClass&&b.removeClass(c.removeClass))),b.trigger("lazy"+a,[b]),k()}function h(b){g(b.type,a(this).off(p,h))}function i(c){if(z.length){c=c||t.forceLoad,A=1/0;var d,e,i=f(),j=b.innerHeight||r.clientHeight,k=b.innerWidth||r.clientWidth;for(d=0,e=z.length;e>d;d++){var l,m=z[d],q=m[0],s=m[n],u=!1,v=c||y(q,o)<0;if(a.contains(r,q)){if(c||!s.visibleOnly||q.offsetWidth||q.offsetHeight){if(!v){var x=q.getBoundingClientRect(),B=s.edgeX,C=s.edgeY;l=x.top+i-C-j,v=i>=l&&x.bottom>-C&&x.left<=k+B&&x.right>-B}if(v){m.on(p,h),g("show",m);var D=s.srcAttr,E=w(D)?D(m):q.getAttribute(D);E&&(q.src=E),u=!0}else A>l&&(A=l)}}else u=!0;u&&(y(q,o,0),z.splice(d--,1),e--)}e||g("complete",a(r))}}function j(){B>1?(B=1,i(),setTimeout(j,t.throttle)):B=0}function k(a){z.length&&(a&&"scroll"===a.type&&a.currentTarget===b&&A>=f()||(B||setTimeout(j,0),B=2))}function l(){v.lazyLoadXT()}function m(){i(!0)}var n="lazyLoadXT",o="lazied",p="load error",q="lazy-hidden",r=c.documentElement||c.body,s=b.onscroll===d||!!b.operamini||!r.getBoundingClientRect,t={autoInit:!0,selector:"img[data-src]",blankImage:"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",throttle:99,forceLoad:s,loadEvent:"pageshow",updateEvent:"load orientationchange resize scroll touchmove focus",forceEvent:"lazyloadall",oninit:{removeClass:"lazy"},onshow:{addClass:q},onload:{removeClass:q,addClass:"lazy-loaded"},onerror:{removeClass:q},checkDuplicates:!0},u={srcAttr:"data-src",edgeX:0,edgeY:0,visibleOnly:!0},v=a(b),w=a.isFunction,x=a.extend,y=a.data||function(b,c){return a(b).data(c)},z=[],A=0,B=0;a[n]=x(t,u,a[n]),a.fn[n]=function(c){c=c||{};var d,f=e(c,"blankImage"),h=e(c,"checkDuplicates"),i=e(c,"scrollContainer"),j=e(c,"show"),l={};a(i).on("scroll",k);for(d in u)l[d]=e(c,d);return this.each(function(d,e){if(e===b)a(t.selector).lazyLoadXT(c);else{var i=h&&y(e,o),m=a(e).data(o,j?-1:1);if(i)return void k();f&&"IMG"===e.tagName&&!e.src&&(e.src=f),m[n]=x({},l),g("init",m),z.push(m),k()}})},a(c).ready(function(){g("start",v),v.on(t.updateEvent,k).on(t.forceEvent,m),a(c).on(t.updateEvent,k),t.autoInit&&(v.on(t.loadEvent,l),l())})}(window.jQuery||window.Zepto||window.$,window,document),function(a){var b=a.lazyLoadXT;b.selector+=",video,iframe[data-src]",b.videoPoster="data-poster",a(document).on("lazyshow","video",function(c,d){var e=d.lazyLoadXT.srcAttr,f=a.isFunction(e),g=!1;d.attr("poster",d.attr(b.videoPoster)),d.children("source,track").each(function(b,c){var d=a(c),h=f?e(d):d.attr(e);h&&(d.attr("src",h),g=!0)}),g&&this.load()})}(window.jQuery||window.Zepto||window.$);

Активируем в настройках изображений пункт:

для того, чтобы скрипт lazyload начал загружаться на сайте.

Теперь в тегах img, video, source, iframe вместо src нужно использовать data-src, никаких дополнительных классов дописывать не нужно, плееры будут прогружаться пользователю в тот момент, когда он появится в видимой части экрана пользователя.

 

Winston?! с указанными тегами которые прописаны в заголовке, если мп3 выводится в одном из тех тегов - то должно сработать. На гитхабе про мп3 нет упоминания, нужно проверять.

 

Bashmak если не работает какой то модуль с новым функционалом ДЛЕ, то здесь нужно только от автора модуля ждать обновление его под актуальную ДЛЕ. Я тоже видел много разных скриптов lazyload, из всех - только данный скрипт требует только подключения JS файла и прописать data-src вместо src. Вс остальные скрипты как правило работают через data-src а так же, например, class="lazyload", и если не указывать этот класс элементу, то загружаться контент не будет.

 

это не ДЛЕшный, это просто скрипт, который целсофт добавили в ДЛЕ, если не нравится данный скрипт - всегда можно использовать любой другой - вам этого никто не запрещает.

 

сам такое встретил сегодня, но тут просто нужно скрипты шаблона адаптировать, а не писать что скрипт выбранный целсофтом - полное ГЭ. Скоро будут наверное шаблоны 100% рабочие с данным функционалом и нормально работающие, на всё это нужно только время и спрос заказчиков (покупателей).

 

Tolstyak87 что смешного в данной теме? Если смешно - то этого делать точно не стоит!!!

 

ettochno с плеерами в табах - есть такой баг, скрипт срабатывает при скроллинге страницы, т.е. если переключить таб на второй плеер то только после небольшого скролла страницы плеер отобразится
Если на странцие один плеер, то можно без проблем использовать данный скрипт.