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

killoff

CD тихо, и не DVD меня ;)
Команда форума
Модератор
Регистрация
13 Май 2008
Сообщения
2.593
Реакции
1.104
  • Автор темы
  • Модер.
  • #1
Все в курсе, что в ДЛЕ 13,2 появился скрипт lazyload.
Код:
/* Lazy Load XT 1.1.0 | MIT License */
На гитхабе исходники и инструкция - Для просмотра ссылки Войди или Зарегистрируйся

В общем, у этого скрипта есть несколько вариаций, в том числе и для медиа тегов 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.$);

Активируем в настройках изображений пункт:
2019-04-10_11-31-21.png
для того, чтобы скрипт lazyload начал загружаться на сайте.

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

SKYNET74

Постоялец
Регистрация
11 Июл 2016
Сообщения
146
Реакции
20
Теперь в тегах img, video, source, iframe вместо src нужно использовать data-src
Они же валидацию не пройдут вроде, тут нужно на стороне сервера уже заменять при выводе как и для img.
 

killoff

CD тихо, и не DVD меня ;)
Команда форума
Модератор
Регистрация
13 Май 2008
Сообщения
2.593
Реакции
1.104
  • Автор темы
  • Модер.
  • #3
Они же валидацию не пройдут вроде, тут нужно на стороне сервера уже заменять при выводе как и для img.
если удалять src, то не пройдут, если же в src ставить что-то минимальное, например, картинку 1х1 - то с валидацией всё будет нормально, но я если честно, за минимум когда, валидность делать нужно тоже не слепо выполняя всё что там пишут.
 

NotDev

Создатель
Регистрация
22 Янв 2019
Сообщения
10
Реакции
3
С Ajax загрузкой после указанных действий происходит что то странное.
Не хотят просто прогружаться картинки, особенно если кликаешь между вкладками на странице.

А так +20 к скорости на Page Speed.
 

spaun55555

Создатель
Регистрация
19 Фев 2013
Сообщения
32
Реакции
3
А как такое прикрутить к более старым версиям? нет сто процентного рабочего способа?
Поставил пока этот способ: Для просмотра ссылки Войди или Зарегистрируйся
Вроде работает!
 
Последнее редактирование:

killoff

CD тихо, и не DVD меня ;)
Команда форума
Модератор
Регистрация
13 Май 2008
Сообщения
2.593
Реакции
1.104
  • Автор темы
  • Модер.
  • #6
А как такое прикрутить к более старым версиям? нет сто процентного рабочего способа?
Поставил пока этот способ: Для просмотра ссылки Войди или Зарегистрируйся
Вроде работает!
подключить lazyload в main.tpl и прописать вручную всё. это просто JS скрипт, просто в последних версиях активацию "ленивой загрузки" вынесли в настройки изображений, и при желании можно включать данную опцию.
 
Сверху