Скрыть объявление
ВАШИ ПРАВА ОГРАНИЧЕНЫ!

Зарегистрируйтесь на форуме, чтобы стать полноценным участником сообщества!

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

Тема в разделе "Хаки DLE", создана пользователем byroot, 10 апр 2019.

10.04.19 в 07:35
10.06.19 в 14:08
40
1.508
2
  1. TopicStarter Overlay
    byroot

    Команда форума Администратор VIP Кинотрафик v2

    Регистрация:
    10 окт 2015
    Сообщения:
    10.516
    Лучших ответов:
    38
    Рейтинги:
    +4.306 / 36 / -39
    Все в курсе, что в ДЛЕ 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, никаких дополнительных классов дописывать не нужно, плееры будут прогружаться пользователю в тот момент, когда он появится в видимой части экрана пользователя.
     
    • Нравится Нравится x 2
    • Полезно Полезно x 2
    • Смешно Смешно x 1
    • Лучший Лучший x 1
  2. Winston?!

    Winston?! Бывалый

    Регистрация:
    31 дек 2016
    Сообщения:
    957
    Лучших ответов:
    2
    Рейтинги:
    +73 / 11 / -12
    byroot с плеерами mp3 тоже будет работать?
     
  3. TopicStarter Overlay
    byroot

    Команда форума Администратор VIP Кинотрафик v2

    Регистрация:
    10 окт 2015
    Сообщения:
    10.516
    Лучших ответов:
    38
    Рейтинги:
    +4.306 / 36 / -39
    Winston?! с указанными тегами которые прописаны в заголовке, если мп3 выводится в одном из тех тегов - то должно сработать. На гитхабе про мп3 нет упоминания, нужно проверять.
     
    • Нравится Нравится x 1
  4. Bashmak

    Bashmak Бывалый

    Регистрация:
    25 фев 2017
    Сообщения:
    290
    Лучших ответов:
    0
    Рейтинги:
    +57 / 3 / -6
    Выбранный разрабами скрипт так себе конечно, при тестировании у меня эта ленивая загрузка из коробки не работала с фильтром от Пунпуна и прочими штуками которые работают через ajax. Либо у меня руки кривые =) В общем подключил другой скрипт из сети.
     
  5. TopicStarter Overlay
    byroot

    Команда форума Администратор VIP Кинотрафик v2

    Регистрация:
    10 окт 2015
    Сообщения:
    10.516
    Лучших ответов:
    38
    Рейтинги:
    +4.306 / 36 / -39
    Bashmak если не работает какой то модуль с новым функционалом ДЛЕ, то здесь нужно только от автора модуля ждать обновление его под актуальную ДЛЕ. Я тоже видел много разных скриптов lazyload, из всех - только данный скрипт требует только подключения JS файла и прописать data-src вместо src. Вс остальные скрипты как правило работают через data-src а так же, например, class="lazyload", и если не указывать этот класс элементу, то загружаться контент не будет.
     
    • Нравится Нравится x 1
    • Согласен Согласен x 1
  6. Bashmak

    Bashmak Бывалый

    Регистрация:
    25 фев 2017
    Сообщения:
    290
    Лучших ответов:
    0
    Рейтинги:
    +57 / 3 / -6
    Однако другой скрипт работает на ура со всеми модулями без какой либо адаптации со стороны авторов. А ДЛЕшный нет.
     
  7. TopicStarter Overlay
    byroot

    Команда форума Администратор VIP Кинотрафик v2

    Регистрация:
    10 окт 2015
    Сообщения:
    10.516
    Лучших ответов:
    38
    Рейтинги:
    +4.306 / 36 / -39
    это не ДЛЕшный, это просто скрипт, который целсофт добавили в ДЛЕ, если не нравится данный скрипт - всегда можно использовать любой другой - вам этого никто не запрещает.
     
  8. Bashmak

    Bashmak Бывалый

    Регистрация:
    25 фев 2017
    Сообщения:
    290
    Лучших ответов:
    0
    Рейтинги:
    +57 / 3 / -6
    Дружище, ты просто повторяешь мои же слова, только иначе :)
    Я же сказал:
    Он внутри коробки, потому то я его так и назвал, ДЛЕшный.

    Это и так понятно, всё что я хотел донести, это то что ДЛЕшный скрипт не дружит с ajax, например есть кнопка "Загрузить ещё" которая подгружает контент со следующей страницы, ну так вот у подгруженных новостей картинки не появятся.
     
    • Нравится Нравится x 1
  9. TopicStarter Overlay
    byroot

    Команда форума Администратор VIP Кинотрафик v2

    Регистрация:
    10 окт 2015
    Сообщения:
    10.516
    Лучших ответов:
    38
    Рейтинги:
    +4.306 / 36 / -39
    сам такое встретил сегодня, но тут просто нужно скрипты шаблона адаптировать, а не писать что скрипт выбранный целсофтом - полное ГЭ. Скоро будут наверное шаблоны 100% рабочие с данным функционалом и нормально работающие, на всё это нужно только время и спрос заказчиков (покупателей).
     
  10. Tolstyak87

    Tolstyak87 Бывалый

    Регистрация:
    21 мар 2018
    Сообщения:
    564
    Лучших ответов:
    0
    Рейтинги:
    +59 / 18 / -10
    Bashmak у меня все отлично работает, а вот другие, из сети, мои кривые руки так и не смогли заставить работать.:D
    И по кнопке загрузить еще тоже все загружается, плюс в некоторых блоках при помощи ajax выводится контент, тоже ном.
     
  11. MarvinRus

    MarvinRus Посетитель

    Регистрация:
    5 мар 2019
    Сообщения:
    66
    Лучших ответов:
    0
    Рейтинги:
    +13 / 2 / -2
    Отличная вещь. Если сделать под плееры, то страница с фильмом быстрее грузится.
     
    • Согласен Согласен x 1
  12. Tolstyak87

    Tolstyak87 Бывалый

    Регистрация:
    21 мар 2018
    Сообщения:
    564
    Лучших ответов:
    0
    Рейтинги:
    +59 / 18 / -10
  13. TopicStarter Overlay
    byroot

    Команда форума Администратор VIP Кинотрафик v2

    Регистрация:
    10 окт 2015
    Сообщения:
    10.516
    Лучших ответов:
    38
    Рейтинги:
    +4.306 / 36 / -39
  14. Tolstyak87

    Tolstyak87 Бывалый

    Регистрация:
    21 мар 2018
    Сообщения:
    564
    Лучших ответов:
    0
    Рейтинги:
    +59 / 18 / -10
    Это ты сейча со чем? Где я смеялся? Если ты о смайлеке, так это я над своими кривыми руками смеялся.
     
  15. TopicStarter Overlay
    byroot

    Команда форума Администратор VIP Кинотрафик v2

    Регистрация:
    10 окт 2015
    Сообщения:
    10.516
    Лучших ответов:
    38
    Рейтинги:
    +4.306 / 36 / -39
    2019-04-11_17-50-05.png
     
  16. ettochno

    ettochno Бывалый

    Регистрация:
    2 авг 2016
    Сообщения:
    253
    Лучших ответов:
    1
    Рейтинги:
    +65 / 11 / -2
    кто нибудь тестил с iframe как работает? Попробовал с картинками в шортстори - результат хороший. Картинки в карусели работают багнуто при перелистовании не прогружаются. Думаю с плеером при переключении вкладок будет такая же лажа. Отпишите, кто реализует.
     
  17. TopicStarter Overlay
    byroot

    Команда форума Администратор VIP Кинотрафик v2

    Регистрация:
    10 окт 2015
    Сообщения:
    10.516
    Лучших ответов:
    38
    Рейтинги:
    +4.306 / 36 / -39
    ettochno с плеерами в табах - есть такой баг, скрипт срабатывает при скроллинге страницы, т.е. если переключить таб на второй плеер то только после небольшого скролла страницы плеер отобразится :(
    Если на странцие один плеер, то можно без проблем использовать данный скрипт.
     
  18. Winston?!

    Winston?! Бывалый

    Регистрация:
    31 дек 2016
    Сообщения:
    957
    Лучших ответов:
    2
    Рейтинги:
    +73 / 11 / -12
    byroot а как понять, что все правильно сделано и ленивая загрузка работает?
     
  19. ettochno

    ettochno Бывалый

    Регистрация:
    2 авг 2016
    Сообщения:
    253
    Лучших ответов:
    1
    Рейтинги:
    +65 / 11 / -2
    Если на плеера скрипт не ставить, то за счет множества картинок на странице, результат заметный. Скрипт отличный, на своих сайтах уже влепил.
     
    • Нравится Нравится x 2
    • Согласен Согласен x 1
  20. MarvinRus

    MarvinRus Посетитель

    Регистрация:
    5 мар 2019
    Сообщения:
    66
    Лучших ответов:
    0
    Рейтинги:
    +13 / 2 / -2
    Да вроде всё нормально и второй плеер открывает без проблем без скролла. Ты на каком браузере смотришь?
     
Яндекс.Метрика