как установить jQuery Lazy Load для opencart

[Savok32]

Кто знает как это сделать*

[Fizik87]

Качаем ниже прикрепленный файл. Помещаем его в папку /catalog/view/javascript/jquery/

Открываем файл /catalog/view/theme/default/template/common/hrader.tpl

Ищем

<script type="text/javascript" src="catalog/view/javascript/common.js"></script>

Перед или после вставляем

<script src="catalog/view/javascript/jquery/jquery.lazyload.js" type="text/javascript"></script>

Все файл подключен...

Теперь для того чтобы он заработал открываем файл /catalog/view/javascript/common.js и после

$(document).ready(function() {

вставляем

$("img.lazy").lazyload();

Теперь для какой картинки хочеш, что бы применялся этот эффект, просто необходимо картинке дать класс "lazy". Если хочеш чтобы для полностью для всех картинок применялся эффект необходимо написать:

$("img").lazyload();

Более подробнее можно прочитать на http://www.appelsiin...ojects/lazyload

Почему-то несмог прикрепить файл, выкладываю ссылку на него - вот

Змінено 24 листопада 2011 користувачем Fizik87

[Smallbear]

прикрепил файл если кому нужно.

P.S. Не знаю почему у Вас,Fizik87 не получилось. Возможно потому что нужно было zip архивом заливать

А демо этого lazy load я как-то не нашел..

jquery.lazyload.zip

[Fizik87]

Демо можно почсотреть тут

[snastik]

Демо можно почсотреть тут

а не подскажите куда вставить

$("img").lazyload();

в 0.2. версии

так как в ней не используется

<script type="text/javascript" src="catalog/view/javascript/common.js"></script>

спасибо

[Fizik87]

Откройте файл \catalog\view\theme\default\template\common\header.tpl

Между тегами head, вставляем

<script type="text/javascript">
$(document).ready(function() {
	$("img").lazyload();
});
</script>

[snastik]

Откройте файл \catalog\view\theme\default\template\common\header.tpl

Между тегами head, вставляем

<script type="text/javascript">
$(document).ready(function() {
	$("img").lazyload();
});
</script>

спасибо будем пробовать :-)

попробовал но что то эффекта нет :-(

[Fizik87]

Попробуйте использовать различные эффекты:

1) Эфект по умолчанию

2) Внутри контента

3) Gazillion images

4) Fade

5) Задержка загрузки

Вверху в черных квадратиках написан пример, как вызывать...

Возможно очень быстро идет выполнение, что ты не можеш этого заметить...

[SaSS]

тоже пытаюсь прикрутить, но пока как-от безуспешно

а. только заметил на офсайте:

Latest version of Lazy Load is not a drop in replacement to your webpage. New browsers load image even if you remove the src attribute with JavaScript. Now you must alter your html code. Put placeholder image into src attribute of your img tag. Real image url should be stored data-original attribute.

<img data-original=“img/example.jpg” src=“img/grey.gif”> Good thing is you can now put all your JavaScript to the end of the page. If you want to support non JavaScript browsers there is an extra step. You must include original image inside <noscript> tag. Read the documentation below.

[SaSS]

установил немного по другому. но вроде работает

в /catalog/view/theme/default/template/common/hrader.tpl

после

<script type="text/javascript" src="catalog/view/javascript/common.js"></script>

добавил

<script src="catalog/view/javascript/jquery/jquery.lazyload.min.js" type="text/javascript"></script>

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

в catalog/view/theme/default/template/product/category.tpl

в самом конце, перед

<?php echo $footer; ?>

добавил

<script type="text/javascript" charset="utf-8">
      $(function() {
$("img.lazy").show().lazyload({
  effect : "fadeIn"
          });
      });
  </script>

и еще в этом файле, заменил

<a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" title="<?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>" /></a>

на

<img width="230" heigh="230" class="lazy" src="catalog/view/theme/default/image/grey.gif" data-original="<?php echo $product['thumb']; ?>" title="<?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>" />
      <noscript><img src="<?php echo $product['thumb']; ?>" title="<?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>" /></noscript>

width="230" heigh="230" размер картинок в категории, поменять на свое значение

grey.gif - закачайте в шаблон папку шаблона

в файле catalog/view/theme/default/stylesheet/stylesheet.css в конце добавил

.lazy {
  display: none;
}

jquery.lazyload.min.zip

Змінено 26 листопада 2011 користувачем SaSS

[arvaal]

А как подружить этот lazyload с переключением в категориях из списка в сетку и наоборот.

[sebades]

<script type="text/javascript" src="catalog/view/javascript/common.js"></script>

У меня нету такого кода. Опенкарт версии 2.2

 

[valerinskaya]

Добрый день! Кто может установить мне на Opencart pro 2.3?

[igorfelix]

У кого lazy load зацикливает загрузку картинок? и пока не сделаешь скрол - картинки не прогрузит. как с этим бороться.

Товары в категориях находятся вверху сразу в области экрана.. вот не знаю как дать ему прогрузить хотя бы первые картинки без скрола.

[chukcha]

23 минуты назад, igorfelix сказал:

У кого lazy load зацикливает загрузку картинок? и пока не сделаешь скрол - картинки не прогрузит. как с этим бороться.

Товары в категориях находятся вверху сразу в области экрана.. вот не знаю как дать ему прогрузить хотя бы первые картинки без скрола.

видимо это особенность вашего скрипта

 

 

 

 

[markimax]

По наблюдениям
loading="lazy" браузера и lazy JS скрипты жрут баллы pagespeed
Но браузерный loading="lazy" жрет их меньше
Забудьте про отдельные JS скрипты
Практически все современные браузеры уже поддерживают <img loading="lazy"

[chukcha]

1 час назад, markimax сказал:

По наблюдениям
loading="lazy" браузера и lazy JS скрипты жрут баллы pagespeed
Но браузерный loading="lazy" жрет их меньше
Забудьте про отдельные JS скрипты
Практически все современные браузеры уже поддерживают <img loading="lazy"

Поддержка - это не значит что это "работает"
Оно - работает, но правильно ли?
 

[markimax]

10 минут назад, chukcha сказал:

Поддержка - это не значит что это "работает"
Оно - работает, но правильно ли?
 

Да

[chukcha]

3 минуты назад, markimax сказал:

Да

ссылку на правильность - отправил в скайп

 

[igorfelix]

А покажите демо где работает "Практически все современные браузеры уже поддерживают <img loading="lazy"

я пытался, я не увидел ничего.

[buslikdrev]

1 час назад, chukcha сказал:

Оно - работает, но правильно ли?

Сама возможность хорошо работает, но всё же для пользователей сделать свой скрипт, если браузер не поддерживает эту возможность.

Возможно вам хотелось бы, чтобы изображения начали загружаться после window.load?

[igorfelix]

22 минуты назад, buslikdrev сказал:

Сама возможность хорошо работает, но всё же для пользователей сделать свой скрипт, если браузер не поддерживает эту возможность.

Возможно вам хотелось бы, чтобы изображения начали загружаться после window.load?

 

ну вот по умолчанию так:

в опере прогружаются только после легкого скрола на 1 мм. если мышкой не скролить, то картинки не отображает.

[buslikdrev]

6 минут назад, igorfelix сказал:

ну вот по умолчанию так:

в опере прогружаются только после легкого скрола на 1 мм. если мышкой не скролить, то картинки не отображает.

Эта хрень не имеет никакого отношения к loading="lazy"

[igorfelix]

2 часа назад, buslikdrev сказал:

Эта хрень не имеет никакого отношения к loading="lazy"

но благодаря этой хрени, подгрузка картинок идет по скролу в консоле браузера. Следовательно картинки грузиться только те что в поле видимости, для меньшей нагрузки на страницу

 

Нашел еще https://medium.com/@dan.postnov/ленивая-загрузка-изображений-плагин-b-lazy-a079e6bcbf76

может его попробую поставить.

Змінено 12 листопада 2020 користувачем igorfelix

[chukcha]

14 часов назад, igorfelix сказал:

может его попробую поставить.

Есть более интересные решеия

В том числе, которые рекомендует сам Г