Редактор темы

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

Ботяра

Забанен
Регистрация
10 Окт 2015
Сообщения
0
Рейтинг реакций
-155
Баллы
0
1/3
Автор темы
Все в курсе, что в ДЛЕ 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.$);

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

Теперь в тегах img, video, source, iframe вместо src нужно использовать data-src, никаких дополнительных классов дописывать не нужно, плееры будут прогружаться пользователю в тот момент, когда он появится в видимой части экрана пользователя.
 
byroot с плеерами mp3 тоже будет работать?
 
Автор темы
Winston?! с указанными тегами которые прописаны в заголовке, если мп3 выводится в одном из тех тегов - то должно сработать. На гитхабе про мп3 нет упоминания, нужно проверять.
 
Выбранный разрабами скрипт так себе конечно, при тестировании у меня эта ленивая загрузка из коробки не работала с фильтром от Пунпуна и прочими штуками которые работают через ajax. Либо у меня руки кривые =) В общем подключил другой скрипт из сети.
 
Автор темы
Bashmak если не работает какой то модуль с новым функционалом ДЛЕ, то здесь нужно только от автора модуля ждать обновление его под актуальную ДЛЕ. Я тоже видел много разных скриптов lazyload, из всех - только данный скрипт требует только подключения JS файла и прописать data-src вместо src. Вс остальные скрипты как правило работают через data-src а так же, например, class="lazyload", и если не указывать этот класс элементу, то загружаться контент не будет.
 
Bashmak если не работает какой то модуль с новым функционалом ДЛЕ, то здесь нужно только от автора модуля ждать обновление его под актуальную ДЛЕ.
Однако другой скрипт работает на ура со всеми модулями без какой либо адаптации со стороны авторов. А ДЛЕшный нет.
 
Автор темы
Однако другой скрипт работает на ура со всеми модулями без какой либо адаптации со стороны авторов. А ДЛЕшный нет.
это не ДЛЕшный, это просто скрипт, который целсофт добавили в ДЛЕ, если не нравится данный скрипт - всегда можно использовать любой другой - вам этого никто не запрещает.
 
это не ДЛЕшный, это просто скрипт, который целсофт добавили в ДЛЕ
Дружище, ты просто повторяешь мои же слова, только иначе 🙂
Я же сказал:
Выбранный разрабами скрипт
Он внутри коробки, потому то я его так и назвал, ДЛЕшный.

если не нравится данный скрипт - всегда можно использовать любой другой - вам этого никто не запрещает.
Это и так понятно, всё что я хотел донести, это то что ДЛЕшный скрипт не дружит с ajax, например есть кнопка "Загрузить ещё" которая подгружает контент со следующей страницы, ну так вот у подгруженных новостей картинки не появятся.
 
Автор темы
Это и так понятно, всё что я хотел донести, это то что ДЛЕшный скрипт не дружит с ajax, например есть кнопка "Загрузить ещё" которая подгружает контент со следующей страницы, ну так вот у подгруженных новостей картинки не появятся.
сам такое встретил сегодня, но тут просто нужно скрипты шаблона адаптировать, а не писать что скрипт выбранный целсофтом - полное ГЭ. Скоро будут наверное шаблоны 100% рабочие с данным функционалом и нормально работающие, на всё это нужно только время и спрос заказчиков (покупателей).
 
Bashmak у меня все отлично работает, а вот другие, из сети, мои кривые руки так и не смогли заставить работать.😀
И по кнопке загрузить еще тоже все загружается, плюс в некоторых блоках при помощи ajax выводится контент, тоже ном.
 
Отличная вещь. Если сделать под плееры, то страница с фильмом быстрее грузится.
 
MarvinRus согласен, сам завтра попробую это реализовать.
 
Автор темы
Tolstyak87 что смешного в данной теме? Если смешно - то этого делать точно не стоит!!!
 
Tolstyak87 что смешного в данной теме? Если смешно - то этого делать точно не стоит!!!
Это ты сейча со чем? Где я смеялся? Если ты о смайлеке, так это я над своими кривыми руками смеялся.
 
кто нибудь тестил с iframe как работает? Попробовал с картинками в шортстори - результат хороший. Картинки в карусели работают багнуто при перелистовании не прогружаются. Думаю с плеером при переключении вкладок будет такая же лажа. Отпишите, кто реализует.
 
Автор темы
ettochno с плеерами в табах - есть такой баг, скрипт срабатывает при скроллинге страницы, т.е. если переключить таб на второй плеер то только после небольшого скролла страницы плеер отобразится 🙁
Если на странцие один плеер, то можно без проблем использовать данный скрипт.
 
byroot а как понять, что все правильно сделано и ленивая загрузка работает?
 
ettochno с плеерами в табах - есть такой баг, скрипт срабатывает при скроллинге страницы, т.е. если переключить таб на второй плеер то только после небольшого скролла страницы плеер отобразится 🙁
Если на странцие один плеер, то можно без проблем использовать данный скрипт.
Если на плеера скрипт не ставить, то за счет множества картинок на странице, результат заметный. Скрипт отличный, на своих сайтах уже влепил.
 
ettochno с плеерами в табах - есть такой баг, скрипт срабатывает при скроллинге страницы, т.е. если переключить таб на второй плеер то только после небольшого скролла страницы плеер отобразится 🙁
Если на странцие один плеер, то можно без проблем использовать данный скрипт.
Да вроде всё нормально и второй плеер открывает без проблем без скролла. Ты на каком браузере смотришь?
 

Похожие темы Последние темы Популярные темы

Назад
Сверху