Lazy load своими руками


#1

Здравствуйте! Поставил loading=“lazy” в /public_html/design/themes/abt__unitheme2/templates/common/image.tpl
62 строке <img class=“ty-pict {$valign} {$class} {if $lazy_load}lazyOwl{/if} {if $generate_image}ty-spinner{/if} cm-image” {$image_attributes|render_tag_attrs nofilter} />
добавляем после img просто loading=“lazy”
<img loading=“lazy” class=“ty-pict {$valign} {$class} {if $lazy_load}lazyOwl{/if} {if $generate_image}ty-spinner{/if} cm-image” {$image_attributes|render_tag_attrs nofilter} />
Получилось! Но есть одна проблема как теперь сделать для первой фотографии товара loading=“auto”?


#2

Там в шаблоне в цикле foreach?
Тогда циклу надо задать имя (параметр name в {foreach …} и используете свойство first (пример с оф.сайта)

{* отображаем "НОВОЕ" напротив первого элемента, иначе id *}
<table>
{foreach from=$items key=myId item=i name=foo}
<tr>
  <td>{if $smarty.foreach.foo.first}НОВОЕ{else}{$myId}{/if}</td>
  <td>{$i.label}</td>
</tr>
{/foreach}
</table>

В зависимости от того, первый проход цикла или нет, ставите auto или lazy


#3

Это вы на каком файле так сделали? Можете прописать путь


#4

Я показал принцип, который вам надо использовать в своём файле, относительно которого был задан вопрос. Найдите foreach, который вызывает image.tpl, передавайте в image.tpl переменную lazy равную true или false.


#6

Сделал как вы сказали не получилось


#7

Сейчас за компьютером, могу более подробно. Темы АБ у меня нет, но принцип то один. Во-первых, не сказали, где вы хотите это применить? Как я понимаю, в выводе товаров категории? Или где? Потому что надо найти тот шаблон, где в цикле перебираются товары, и из него вызывается шаблон image.tpl
в вызывающем шаблоне

{foreach ..... name="foreach_products"}
........
{if $smarty.foreach.foreach_first}
{$lazy=false}
{else}
{$lazy=true}
{/if}
{include file="common/image.tpl"   .......... lazy=$lazy}
........
{/foreach}

в файле
design/themes/abt__unitheme2/templates/common/image.tpl

<img loading=“{if $lazy}lazy{else}auto{/if}” .........

так сделали?


#8

Круто, я бы тоже это хотел сделать )) хотя использую бесплатный модуль но кажется он не работает ))


#9

Он может не работать, если есть еще модули на работу с изображениями. Попробуйте выключить и проверьте.


#10

Других модулей нет, как проверить скажите пожалуйста? )) проверяю как тут https://web.dev/i18n/ru/browser-level-image-lazy-loading/ они разом все прогружаются, могу ли ссылку на сайт кинуть? Как раз скажите работает ли ваш модуль? :slightly_smiling_face:


#11

Работает, у нас все модули работают. Напишите в личку, посмотрим.


#12

Написал.


#13

Нет Я как увидел foreach начал искать файл с Product.view потом product_images
и так делал


#14

Плохо работает


#15

То есть это для страницы одного товара? Тогда для изображений товара? или для какого-то блока?
Правильно/полностью поставленная задача - 90% ее решения.


#16

Этот модуль просто напросто дает значение всем фотографиям loading=“lazy”, нам нужно чтобы она видела первое отображение фотографий


#17

Всех товаров и банеров хочу сделать)


#18

Блоги и тд я не трогал, просто отложенная загрузка блока и там добавляешь класс с анимацией


#19

По задумке видимая область товара это большое изображение имеет значение loading=“auto” или вообще удалить бы loading. А скрытые изображенения loading=“lazy”


#20

смотрим шаблон страницы товара
/design/themes/ТЕМА/templates/blocks/product_templates/default_template.tpl
это в респонсив, тема АБ как я понимаю перезаписывает его поэтому смотрим у них в теме
находим

{include file="views/products/components/product_images.tpl"  ........

идем в
/design/themes/ТЕМА/templates/views/products/components/product_images.tpl (если в вашей теме нет этого шаблога, то только тогда идем в респонсив и ищем там)
находим что-то типа

{foreach from=$product.image_pairs item="image_pair"}
    {if $image_pair}
        {if $image_pair.image_id}
            {assign var="img_id" value=$image_pair.image_id}
        {else}
            {assign var="img_id" value=$image_pair.detailed_id}
        {/if}
        {include file="common/image.tpl" images=$image_pair link_class="cm-image-previewer hidden" obj_id="`$preview_id`_`$img_id`" image_width=$image_width image_height=$image_height image_id="preview[product_images_`$preview_id`]"}
    {/if}
{/foreach}

дописываем

{foreach from=$product.image_pairs item="image_pair" name="foreach_images"}
{if $smarty.foreach.foreach_images.first}
{$lazy="auto"}
{else}
{$lazy="lazy"}
{/if}
    {if $image_pair}
        {if $image_pair.image_id}
            {assign var="img_id" value=$image_pair.image_id}
        {else}
            {assign var="img_id" value=$image_pair.detailed_id}
        {/if}
        {include file="common/image.tpl" lazy=$lazy images=$image_pair link_class="cm-image-previewer hidden" obj_id="`$preview_id`_`$img_id`" image_width=$image_width image_height=$image_height image_id="preview[product_images_`$preview_id`]"}
    {/if}
{/foreach}

теперь идем в
/design/themes/abt__unitheme2/templates/common/image.tpl

<img loading=“{$lazy}” class=“ty-pict {$valign} {$class} {if $lazy_load}lazyOwl{/if} {if $generate_image}ty-spinner{/if} cm-image” {$image_attributes|render_tag_attrs nofilter} />

#21

Теперь она показывает во всех товарах <img loading="“”"
В чем может быть ошибка?