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

Bashmak · Jun 12, 2021

Roman.U said: ↑

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

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

byroot · Jun 12, 2021

Bashmak said: ↑

И зачем в js что-то менял? Из коробоки же идёт.
Click to expand...

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

Roman.U said: ↑

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

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

Bashmak said: ↑

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

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

wawe · Jun 12, 2021

Roman.U said: ↑

Включил в админке отложенную загрузку изображений.
В /engine/classes/js/lazyload.js заменил на код:

Code:

/* 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

Click to expand...

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

dickrowman · Aug 21, 2021

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

byroot · Aug 23, 2021

dickrowman said: ↑

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

Big_Daddy_777 · Oct 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 · Oct 17, 2022

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

Big_Daddy_777 · Oct 17, 2022

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

Может дело ещё в самом классе?
byroot said: ↑
удали в шаблоне
Code:
class="lazy-loaded"
нужные классы сами будут добавлены в код страницы при нахождении data-src на изображениях.
Click to expand...

byroot · Oct 17, 2022

Big_Daddy_777 said: ↑

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

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

Kandi · Oct 17, 2022

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

1080p · Oct 18, 2022

byroot said: ↑

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

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

byroot · Oct 18, 2022

1080p said: ↑

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

Можно и фоном сделать, размеры всегда прописаны в стилях, и если всё нормально, то и картинки не будут прыгать, да и 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 хорош или нет? нужен инвайт

Useful Searches

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 хорош или нет? нужен инвайт

Useful Searches

Useful Searches

Bashmak
PRO Users

byroot
Забанен

wawe
PRO Users

byroot
Забанен

byroot
Забанен

byroot
Забанен

byroot
Забанен