Fast home

sitepoint-editors · Nov 22, 2017 · c69eee2 · c69eee2
1 parent 073b3a6
commit c69eee2
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 1 deletion.
diff --git a/src/Controller/HomeController.php b/src/Controller/HomeController.php
@@ -31,7 +31,7 @@ public function __construct(Twig_Environment $twig, EntityManager $em)
      */
     public function homeAction()
     {
-        $galleries = $this->em->getRepository(Gallery::class)->findBy([], ['createdAt' => 'DESC']);
+        $galleries = $this->em->getRepository(Gallery::class)->findBy([], ['createdAt' => 'DESC'], self::PER_PAGE);
         $view = $this->twig->render('home.html.twig', [
             'galleries' => $galleries,
         ]);

diff --git a/templates/home.html.twig b/templates/home.html.twig
@@ -20,4 +20,42 @@
 
     </div>
 
+{% endblock %}
+
+
+{% block javascripts %}
+    {{ parent() }}
+
+    <script>
+        $(function () {
+            var nextPage = 2;
+            var $galleriesContainer = $('.home__galleries-container');
+            var $lazyLoadCta = $('.home__lazy-load-cta');
+
+            function onScroll() {
+                var y = $(window).scrollTop() + $(window).outerHeight();
+                if (y >= $('body').innerHeight() - 100) {
+                    $(window).off('scroll.lazy-load');
+                    $lazyLoadCta.click();
+                }
+            }
+
+            $lazyLoadCta.on('click', function () {
+                var url = "{{ url('home.lazy-load') }}";
+                $.ajax({
+                    url: url,
+                    data: {page: nextPage},
+                    success: function (data) {
+                        if (data.success === true) {
+                            $galleriesContainer.append(data.data);
+                            nextPage++;
+                            $(window).on('scroll.lazy-load', onScroll);
+                        }
+                    }
+                });
+            });
+
+            $(window).on('scroll.lazy-load', onScroll);
+        });
+    </script>
 {% endblock %}