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

Bashmak · 12 июн 2021

Roman.U сказал(а): ↑

Теперь ваше нефига не понял.
<img data-src="/uploads/posts/2020-08/1598649538_kuhnja-8-sezon.jpg" alt=""> вот так примерно в коде должно быть, у меня такого нет.
Нажмите, чтобы раскрыть...

У тега img должны быть и data-src и src, а не что-то одно.

byroot · 12 июн 2021

Bashmak сказал(а): ↑

И зачем в js что-то менял? Из коробоки же идёт.
Нажмите, чтобы раскрыть...

В версии скрипта на момент написания поста не была добавлена поддержка iframe/video... Не помню точно с какой версии они добавили в коробку нормальный lazyload, чтоб не только на картинках работало.

Roman.U сказал(а): ↑

Теперь ваше нефига не понял.
<img data-src="/uploads/posts/2020-08/1598649538_kuhnja-8-sezon.jpg" alt=""> вот так примерно в коде должно быть, у меня такого нет.
Нажмите, чтобы раскрыть...

если в шаблоне всё прописано правильно, то должно быть data-src. Если в шаблоне этого нет, то это значит только то, что не в том шаблоне видимо делаешь правку, либо кеш где-то висит...

Bashmak сказал(а): ↑

У тега img должны быть и data-src и src, а не что-то одно.
Нажмите, чтобы раскрыть...

можно и просто data-src, тогда просто на момент загрузки noimage будет выводиться. но лучше прописать картинку 1х1 чтобы небыли видны битые изображения.

wawe · 12 июн 2021

Roman.U сказал(а): ↑

Включил в админке отложенную загрузку изображений.
В /engine/classes/js/lazyload.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.$);

В шаблоне в шот стори в место src прописал data-src .
В итоге изображений нет, что не так сделал? DataLife Engine: 13.2

Нажмите, чтобы раскрыть...

Настройка работы с изображениями
[IMG]

dickrowman · 21 авг 2021

Коллеги, подскажите, как мне сделать так, что бы лезилоад не трогал первую картинку на сайте? Которая выводится с shortstory тегом {image-1}. Что бы шла предзагрузка первого изображения.

byroot · 23 авг 2021

dickrowman сказал(а): ↑

Коллеги, подскажите, как мне сделать так, что бы лезилоад не трогал первую картинку на сайте? Которая выводится с shortstory тегом {image-1}. Что бы шла предзагрузка первого изображения.
Нажмите, чтобы раскрыть...
Код:
[newscount=1]<link rel="preload" as="image" href="{image-1}" />[/newscount]

Big_Daddy_777 · 17 окт 2022

Всем привет, коллеги!

Поставил галочку в админке. Прописал в shortstory всем картинкам data-src вместо обычного scr .

Никаких JS не заливал и не менял, ибо мне нужно именно отложенная загрузка ИСКЛЮЧИТЕЛЬНО изображений. Версия DLE 14.

Парадокс в том, что на сайте нихрена не происходит и не изменилось То есть открываю главную страницу, открываю страницу категорий - и не вижу, чтобы картинки (внизу страницы) загружались по мере того, как я прокручиваю страницу скроллом вниз.

Заметил на одном сайте вот такую конструкцию:

<img data-src="сссылка на картинку" alt="Ночной оборотень" src="сссылка на картинку" class="lazy-loaded">

Сравнил со своим сайтом (у меня вот так):

<img src="сссылка на картинку" alt="Ночной оборотень" data-src="сссылка на картинку" class="lazy-loaded">

Получается, у меня scr сначала идет, а потом data. Но том сайте (о котором говорю), там прям реально видно, как картинку подгружаются спустя несколько доли секунд после прокрутки страниц.

А на самое сайт - такое ощущение, что как грузятся все картинки сразу, так и грузятся дальше.

Что не так? Где копать? Куда смотреть ?

За подсказку как всегда - могу скинуть на мороженое )

byroot · 17 окт 2022

удали в шаблоне
Код:
class="lazy-loaded"
нужные классы сами будут добавлены в код страницы при нахождении data-src на изображениях.

Big_Daddy_777 · 17 окт 2022

Дело в том, что этот класс я вручную не прописываю. Он действительно подтягивается сам. Но визуально, я не вижу, что картинки на моем сайте загружаются отложенно... Могу скинуть ссылку на свой сайт и сайт, где визуально видно, что картинки загружаются по мере прокрутки.

Может дело ещё в самом классе?
byroot сказал(а): ↑
удали в шаблоне
Код:
class="lazy-loaded"
нужные классы сами будут добавлены в код страницы при нахождении data-src на изображениях.
Нажмите, чтобы раскрыть...

byroot · 17 окт 2022

Big_Daddy_777 сказал(а): ↑

Но визуально, я не вижу, что картинки на моем сайте загружаются отложенно...
Нажмите, чтобы раскрыть...

в лс кидай ссылку, проверю.

Kandi · 17 окт 2022

Big_Daddy_777 скинь сайты или сам посмотри в консоле разработчика на вкладке Network, там когда страницу крутишь, если у тебя включена ленивая загрузка начинают подгружаться изображения по мере прокрутки. Либо надо резко мышкой промотать вниз страницы, тогда будет заметен эффект ленивой загрузки. Так как у тебя уже мб кэш изображений и они быстро грузиться, когда просто колёсиком крутишь

1080p · 18 окт 2022

byroot сказал(а): ↑

можно и просто data-src, тогда просто на момент загрузки noimage будет выводиться. но лучше прописать картинку 1х1 чтобы небыли видны битые изображения.
Нажмите, чтобы раскрыть...

с 1х1 появится проблема с CLS из-за прыгающих картинок. если нет адаптивного дизайна, то решается пустяково , а если адаптипный дизайн, то проблемно.
допустим для мобил один размер картинки ,если ставить min-height: 120px (допустим) , то для пк версии уже другой будет минимум.

byroot · 18 окт 2022

1080p сказал(а): ↑

с 1х1 появится проблема с CLS из-за прыгающих картинок. если нет адаптивного дизайна, то решается пустяково , а если адаптипный дизайн, то проблемно.
допустим для мобил один размер картинки ,если ставить min-height: 120px (допустим) , то для пк версии уже другой будет минимум.
Нажмите, чтобы раскрыть...

Можно и фоном сделать, размеры всегда прописаны в стилях, и если всё нормально, то и картинки не будут прыгать, да и 1х1 просто как вместо фона нормально работает и не прыгает ничего. Хотя всё от шаблона ещё зависит.

ZeroCoolPro.Biz

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

Bashmak
PRO Users

byroot
Забанен

wawe
PRO Users

dickrowman Зелёный

byroot
Забанен

Big_Daddy_777 Бывалый

byroot
Забанен

Big_Daddy_777 Бывалый

byroot
Забанен

Kandi Бывалый

1080p Местный

byroot
Забанен

Помогите с invite для регистрации iframe.video

Инвайт iframe.video

Инвайт на iframe.video

Iframe.video хорош или нет? нужен инвайт

Быстрый поиск

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

Bashmak PRO Users

byroot Забанен

wawe PRO Users

dickrowman Зелёный

byroot Забанен

Big_Daddy_777 Бывалый

byroot Забанен

Big_Daddy_777 Бывалый

byroot Забанен

Kandi Бывалый

1080p Местный

byroot Забанен

Помогите с invite для регистрации iframe.video

Инвайт iframe.video

Инвайт на iframe.video

Iframe.video хорош или нет? нужен инвайт

Быстрый поиск

Быстрый поиск

Bashmak
PRO Users

byroot
Забанен

wawe
PRO Users

byroot
Забанен

byroot
Забанен

byroot
Забанен

byroot
Забанен