<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
	<title type="html"><![CDATA[Форум ReadyScript &mdash; Сделайте, пожалуйста, Lazy loading]]></title>
	<link rel="self" href="https://forum.readyscript.ru/feed/atom/topic/876/" />
	<updated>2020-09-15T05:02:05Z</updated>
	<generator>PunBB</generator>
	<id>https://forum.readyscript.ru/topic/876/sdelaite-pozhaluista-lazy-loading/</id>
		<entry>
			<title type="html"><![CDATA[Re: Сделайте, пожалуйста, Lazy loading]]></title>
			<link rel="alternate" href="https://forum.readyscript.ru/post/11276/#p11276" />
			<content type="html"><![CDATA[<p>Здравствуйте, подскажите как реализовать подгрузку фильтра при lazyload, сейчас все работает, но при смене фильтра подгрузка сбивается</p><p>код такой:</p><p>&lt;div data-url=&quot;{$router-&gt;getUrl(&#039;catalog-front-listproducts&#039;, [&#039;category&#039;=&gt;$category.alias, &#039;p&#039; =&gt; $paginator-&gt;page+1])}&quot; class=&quot;paginator_showMoreRow rs-ajax-paginator link&quot;&gt;Показать ещё&lt;/div&gt;</p>]]></content>
			<author>
				<name><![CDATA[Илья]]></name>
				<uri>https://forum.readyscript.ru/user/71/</uri>
			</author>
			<updated>2020-09-15T05:02:05Z</updated>
			<id>https://forum.readyscript.ru/post/11276/#p11276</id>
		</entry>
		<entry>
			<title type="html"><![CDATA[Re: Сделайте, пожалуйста, Lazy loading]]></title>
			<link rel="alternate" href="https://forum.readyscript.ru/post/9031/#p9031" />
			<content type="html"><![CDATA[<p>Плагин всё сам разрулит. Нужно просто в список товаров его вставить.</p>]]></content>
			<author>
				<name><![CDATA[Закусило Александр]]></name>
				<uri>https://forum.readyscript.ru/user/20/</uri>
			</author>
			<updated>2018-08-16T15:18:10Z</updated>
			<id>https://forum.readyscript.ru/post/9031/#p9031</id>
		</entry>
		<entry>
			<title type="html"><![CDATA[Re: Сделайте, пожалуйста, Lazy loading]]></title>
			<link rel="alternate" href="https://forum.readyscript.ru/post/9024/#p9024" />
			<content type="html"><![CDATA[<p>Так в итоге как решение выглядит если с фильтром подружить?</p>]]></content>
			<author>
				<name><![CDATA[Александр Б]]></name>
				<uri>https://forum.readyscript.ru/user/358/</uri>
			</author>
			<updated>2018-08-13T10:47:28Z</updated>
			<id>https://forum.readyscript.ru/post/9024/#p9024</id>
		</entry>
		<entry>
			<title type="html"><![CDATA[Re: Сделайте, пожалуйста, Lazy loading]]></title>
			<link rel="alternate" href="https://forum.readyscript.ru/post/6460/#p6460" />
			<content type="html"><![CDATA[<p>Речь идёт о том, что кнопка на которую навешено событие подгрузки, теряет событие, т.к. контент заменятся&nbsp; полностью и собтие прокрутки не навешивается. Т.е. нужно заново навести на кнопку инициализация плагина jquery.ajaxpagination.js</p>]]></content>
			<author>
				<name><![CDATA[Закусило Александр]]></name>
				<uri>https://forum.readyscript.ru/user/20/</uri>
			</author>
			<updated>2017-03-16T07:51:16Z</updated>
			<id>https://forum.readyscript.ru/post/6460/#p6460</id>
		</entry>
		<entry>
			<title type="html"><![CDATA[Re: Сделайте, пожалуйста, Lazy loading]]></title>
			<link rel="alternate" href="https://forum.readyscript.ru/post/6455/#p6455" />
			<content type="html"><![CDATA[<p>Александр, а можно подробнее. Столкнулся с такой же проблемой, что если включен фильтр. То подгрузка не работает. </p><p>//Инициализируем обновляемые зоны<br />$(window).bind(&#039;new-content&#039;, function(e) {<br />&nbsp; &nbsp; //Нужный мне навешиваемый код на элементы.<br />});</p><p>Не совсем понял вот по этому коду.</p>]]></content>
			<author>
				<name><![CDATA[Ренат]]></name>
				<uri>https://forum.readyscript.ru/user/251/</uri>
			</author>
			<updated>2017-03-15T11:35:50Z</updated>
			<id>https://forum.readyscript.ru/post/6455/#p6455</id>
		</entry>
		<entry>
			<title type="html"><![CDATA[Re: Сделайте, пожалуйста, Lazy loading]]></title>
			<link rel="alternate" href="https://forum.readyscript.ru/post/5937/#p5937" />
			<content type="html"><![CDATA[<p>При включённом фильтре надо заново цеплять lazy load, т.к. там элементы заменяются на новые, на которые ещё ничего не подвешено в Вашем случае. Вешаться можно на событие <strong>&#039;new-content&#039;</strong>, оно срабатывает когда фильтр обновляет содержимое.<br /></p><div class="codebox"><pre><code>//Инициализируем обновляемые зоны
$(window).bind(&#039;new-content&#039;, function(e) {
    //Нужный мне навешиваемый код на элементы.
});</code></pre></div>]]></content>
			<author>
				<name><![CDATA[Закусило Александр]]></name>
				<uri>https://forum.readyscript.ru/user/20/</uri>
			</author>
			<updated>2017-02-02T07:50:49Z</updated>
			<id>https://forum.readyscript.ru/post/5937/#p5937</id>
		</entry>
		<entry>
			<title type="html"><![CDATA[Re: Сделайте, пожалуйста, Lazy loading]]></title>
			<link rel="alternate" href="https://forum.readyscript.ru/post/5935/#p5935" />
			<content type="html"><![CDATA[<p>наконец-то смог проверить ajax-пагинацию, <br />вроде пагинация заработала по предложенному способу... только почему-то при открытии страницы с каталогом сразу очень много позиций подгружается (по ощущениям, сразу по сотне или даже больше), при прокрутке они еще подгружаются (хотя, это может мне кажется, потому что на других сайтах момент подгрузки виден, когда листаешь страницу и подходишь к ее нижней части, а тут подгружаться начинают сразу после открытия (это видно по скролл-бару браузера - он начинает как сумасшедший двигаться). может это связано с тем, что кнопка &quot;еще&quot; находится вверху страницы, а не внизу ??</p><p>также при включенном фильтре (напр., при отображении по определенному бренду) lazy loading перестает работать, то есть доходишь до низа страницы и все останавливается (хотя позиций больше, чем на одну страницу)</p><p>при сбросе фильтра, ajax также перестает работать. работать начинает только после перезагрузки страницы (и так по кругу)</p><div class="quotebox"><cite>Закусило Александр пишет:</cite><blockquote><p>Есть плагин ajaxPagination, который можно внедрить, например как здесь <a href="http://instrument-krasnodar.ru/catalog/garazhnoe-oborudovanie-i-specinstrument/">http://instrument-krasnodar.ru/catalog/ … nstrument/</a></p></blockquote></div><p>на выше приведенном сайте все работает, как надо, и подгружаться начинает при приближении к нижней части экрана, и при включенных фильтрах все скроллится тоже как надо...</p>]]></content>
			<author>
				<name><![CDATA[Олег]]></name>
				<uri>https://forum.readyscript.ru/user/458/</uri>
			</author>
			<updated>2017-02-02T00:50:37Z</updated>
			<id>https://forum.readyscript.ru/post/5935/#p5935</id>
		</entry>
		<entry>
			<title type="html"><![CDATA[Re: Сделайте, пожалуйста, Lazy loading]]></title>
			<link rel="alternate" href="https://forum.readyscript.ru/post/4485/#p4485" />
			<content type="html"><![CDATA[<div class="quotebox"><cite>Закусило Александр пишет:</cite><blockquote><p>Теперь дело за инициализацией в шаблоне. Открываем <strong>list_products.tpl</strong> в Вашей теме.</p><div class="codebox"><pre><code>&lt;div class=&quot;products-list&quot;&gt;
//Здесь элементы каталога товаров.

&lt;/div&gt;
//А здесь пагинация кнопкой</code></pre></div></blockquote></div><p>Для новой версии тем изменения нужно вносить в list_products_items.tpl</p><p>приписываем класс<br /></p><div class="codebox"><pre><code>&lt;ul class=&quot;products products-list&quot;&gt;</code></pre></div><p>и тут<br /></p><div class="codebox"><pre><code>&lt;table class=&quot;productTable products-list&quot;&gt;</code></pre></div>]]></content>
			<author>
				<name><![CDATA[Андрей]]></name>
				<uri>https://forum.readyscript.ru/user/299/</uri>
			</author>
			<updated>2016-09-07T05:58:04Z</updated>
			<id>https://forum.readyscript.ru/post/4485/#p4485</id>
		</entry>
		<entry>
			<title type="html"><![CDATA[Re: Сделайте, пожалуйста, Lazy loading]]></title>
			<link rel="alternate" href="https://forum.readyscript.ru/post/4471/#p4471" />
			<content type="html"><![CDATA[<div class="quotebox"><blockquote><p>Спасибо, буду пробовать.<br />Единственное, я не понял, в вашем случае пагинация активируется кнопкой &quot;Показать еще&quot; или же прокруткой содержимого вниз?<br />Или clickOnScroll именно за это и отвечает?</p></blockquote></div><p>Кнопка есть всегда, но благодаря clickOnScroll, её нажатие происходит автоматически при прокрутке вниз. Кнопка нужна. Т.к. если не будет интернета. Ничего не подгрузить, но кнопка останется.</p>]]></content>
			<author>
				<name><![CDATA[Закусило Александр]]></name>
				<uri>https://forum.readyscript.ru/user/20/</uri>
			</author>
			<updated>2016-09-05T13:28:49Z</updated>
			<id>https://forum.readyscript.ru/post/4471/#p4471</id>
		</entry>
		<entry>
			<title type="html"><![CDATA[Re: Сделайте, пожалуйста, Lazy loading]]></title>
			<link rel="alternate" href="https://forum.readyscript.ru/post/4470/#p4470" />
			<content type="html"><![CDATA[<p>Спасибо, буду пробовать.<br />Единственное, я не понял, в вашем случае пагинация активируется кнопкой &quot;Показать еще&quot; или же прокруткой содержимого вниз?</p><p>Или clickOnScroll именно за это и отвечает?</p>]]></content>
			<author>
				<name><![CDATA[Олег]]></name>
				<uri>https://forum.readyscript.ru/user/458/</uri>
			</author>
			<updated>2016-09-05T12:24:15Z</updated>
			<id>https://forum.readyscript.ru/post/4470/#p4470</id>
		</entry>
		<entry>
			<title type="html"><![CDATA[Re: Сделайте, пожалуйста, Lazy loading]]></title>
			<link rel="alternate" href="https://forum.readyscript.ru/post/4468/#p4468" />
			<content type="html"><![CDATA[<p>Ну во первых в <strong>layout.tpl</strong> Вашей темы нужно добавить скрипт <strong>jquery.ajaxpagination.js</strong><br /></p><div class="codebox"><pre><code>{addjs file=&quot;jquery.ajaxpagination.js&quot;}</code></pre></div><p>Потом убедиться что у Вас есть js файл в папке <strong>/templates/Ваша тема/resourse/js/jquery.ajaxpagination.js</strong><br />Если нет, то переносим из <strong>/templates/.default/resourse/js/jquery.ajaxpagination.js</strong></p><p>Теперь дело за инициализацией в шаблоне. Открываем <strong>list_products.tpl</strong> в Вашей теме.<br />Убираем строку с пагинацией.<br /></p><div class="codebox"><pre><code>{include file=&quot;%THEME%/paginator.tpl&quot;}</code></pre></div><p>Вместо неё создаёт кнопку &quot;Показать ещё&quot; с настройками:<br /></p><div class="codebox"><pre><code>{if $paginator-&gt;total_pages &gt; $paginator-&gt;page}
        &lt;div class=&quot;wrapper-space&quot;&gt;&lt;/div&gt;
        &lt;div data-pagination-options=&#039;{ &quot;appendElement&quot;:&quot;.products-list&quot; , &quot;clickOnScroll&quot;:true }&#039; href=&quot;{$router-&gt;getUrl(&#039;catalog-front-listproducts&#039;, [&#039;query&#039;=&gt;$query, &#039;category&#039;=&gt;$category.alias,&#039;p&#039; =&gt; $paginator-&gt;page+1])}&quot; data-href=&quot;{$router-&gt;getUrl(&#039;catalog-front-listproducts&#039;, [&#039;query&#039;=&gt;$query, &#039;category&#039;=&gt;$category.alias,&#039;p&#039; =&gt; $paginator-&gt;page+1])}&quot; class=&quot;more onemoreEmpty margin-top ajaxPaginator&quot;&gt;
            &lt;div class=&quot;icon&quot;&gt;&lt;/div&gt;
            еще
        &lt;/div&gt;
    {/if}</code></pre></div><p>Ключевым здесь является класс <strong>ajaxPaginator</strong>. Т.к. именно по нему отрабатывает пагин. <br />У самой кнопки есть настройки&nbsp; <br /></p><div class="codebox"><pre><code> &quot;appendElement&quot;:&quot;.products-list&quot; , &quot;clickOnScroll&quot;:true</code></pre></div><p>где <strong>appendElement</strong> - это класс который будет заменять внутреннее содержимое подгруженной страницы. Т.к. возвращается вся страница, а заменена будет только 1 часть.&nbsp; Например<br /></p><div class="codebox"><pre><code>&lt;div class=&quot;products-list&quot;&gt;
//Здесь элементы каталога товаров.

&lt;/div&gt;
//А здесь пагинация кнопкой</code></pre></div><p><strong>clickOnScroll</strong> - использовать автопрокрутку или нет (true/false).</p>]]></content>
			<author>
				<name><![CDATA[Закусило Александр]]></name>
				<uri>https://forum.readyscript.ru/user/20/</uri>
			</author>
			<updated>2016-09-05T12:13:09Z</updated>
			<id>https://forum.readyscript.ru/post/4468/#p4468</id>
		</entry>
		<entry>
			<title type="html"><![CDATA[Re: Сделайте, пожалуйста, Lazy loading]]></title>
			<link rel="alternate" href="https://forum.readyscript.ru/post/4465/#p4465" />
			<content type="html"><![CDATA[<div class="quotebox"><cite>Закусило Александр пишет:</cite><blockquote><p>Если нужно могу технически подсказать как сделать. Там ничего сложного.</p></blockquote></div><p>Если ничего сложного, то подскажите, думаю, многим интересно и полезно будет.<br />Только, если можно, с упором на тех, кто в вашей системе не совсем еще разбирается.<br />Ведь то, что для вас &quot;просто&quot;, то для некоторых - просто лес дремучий. <br />Заранее благодарен.</p>]]></content>
			<author>
				<name><![CDATA[Олег]]></name>
				<uri>https://forum.readyscript.ru/user/458/</uri>
			</author>
			<updated>2016-09-05T09:44:03Z</updated>
			<id>https://forum.readyscript.ru/post/4465/#p4465</id>
		</entry>
		<entry>
			<title type="html"><![CDATA[Re: Сделайте, пожалуйста, Lazy loading]]></title>
			<link rel="alternate" href="https://forum.readyscript.ru/post/4462/#p4462" />
			<content type="html"><![CDATA[<div class="quotebox"><cite>Олег пишет:</cite><blockquote><p>Подскажите, планируется ли сделать подгрузку каталога товаров с помощью Lazy loading, то есть, когда каталог товаров размещается на одной странице, а при перемотке вниз автоматически подгружается контент из следующей страницы. Делается, видимо, это с помощью AJAX и используется на множестве современных сайтов, начиная от facebook и vk и заканчивая магазинами на shop-script. User Experience от этого сильно вырос бы, а&nbsp; нагрузка на сервер снизилась.</p></blockquote></div><p>Пока не планируется. Но это легко сделать у нас. Есть плагин ajaxPagination, который можно внедрить, например как здесь <a href="http://instrument-krasnodar.ru/catalog/garazhnoe-oborudovanie-i-specinstrument/">http://instrument-krasnodar.ru/catalog/ … nstrument/</a></p><p>Сам плагин лежит в теме по умолчанию <strong>/templates/.default/resourse/js/jquery.ajaxpagination.js</strong><br />Если нужно могу технически подсказать как сделать. Там ничего сложного.</p>]]></content>
			<author>
				<name><![CDATA[Закусило Александр]]></name>
				<uri>https://forum.readyscript.ru/user/20/</uri>
			</author>
			<updated>2016-09-05T08:07:54Z</updated>
			<id>https://forum.readyscript.ru/post/4462/#p4462</id>
		</entry>
		<entry>
			<title type="html"><![CDATA[Re: Сделайте, пожалуйста, Lazy loading]]></title>
			<link rel="alternate" href="https://forum.readyscript.ru/post/4460/#p4460" />
			<content type="html"><![CDATA[<div class="quotebox"><cite>Ярослав пишет:</cite><blockquote><p>Мне нравится реализация яндекс.маркет. Когда и постраничная навигация сохранена и есть подгрузка. <br />Реализация ДНС без постраничной очень неудобна.</p></blockquote></div><p>Возможно, для многостраничных списков это действительно удобно.<br />Если товаров 3-5 страниц - разницы нет, но, пожалуй, на длинных списках можно замучаться мотать.<br />Хотя, некоторые товарищи говорят, что покупатели редко дальше пятой страницы заходят</p>]]></content>
			<author>
				<name><![CDATA[Олег]]></name>
				<uri>https://forum.readyscript.ru/user/458/</uri>
			</author>
			<updated>2016-09-05T00:18:52Z</updated>
			<id>https://forum.readyscript.ru/post/4460/#p4460</id>
		</entry>
		<entry>
			<title type="html"><![CDATA[Re: Сделайте, пожалуйста, Lazy loading]]></title>
			<link rel="alternate" href="https://forum.readyscript.ru/post/4459/#p4459" />
			<content type="html"><![CDATA[<p>Мне нравится реализация яндекс.маркет. Когда и постраничная навигация сохранена и есть подгрузка. <br />Реализация ДНС без постраничной очень неудобна.</p>]]></content>
			<author>
				<name><![CDATA[Ярослав]]></name>
				<uri>https://forum.readyscript.ru/user/74/</uri>
			</author>
			<updated>2016-09-04T08:44:27Z</updated>
			<id>https://forum.readyscript.ru/post/4459/#p4459</id>
		</entry>
</feed>
