Improve home page loading effect

SmallsLIVE · Jan 21, 2021 · c289526 · c289526
1 parent 746c0ac
commit c289526
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 26 deletions.
diff --git a/smallslive/templates/home_banners_carousel.html b/smallslive/templates/home_banners_carousel.html
@@ -155,32 +155,35 @@
   }
   function becomeMember() {
 
-      window.location = '{% url 'become_supporter' %}';
-    }
+    window.location = '{% url 'become_supporter' %}';
+  }
 
-    $(document).ready(function () {
-      $('.banner-button-info').on('click', function() {
-        $('.carousel').slick('slickSetOption', 'autoplay', false).slick('slickPause');
-      });
-      $('.banner-button-info').on('mouseenter', function() {
-        $('.carousel').slick('slickSetOption', 'autoplay', false).slick('slickPause');
-      });
-      $('.banner-button-info').on('mouseleave', function() {
-        $('.carousel').slick('slickSetOption', 'autoplay', true).slick('slickPlay');
-      });
-      $('#becomeMemberDialog').on('mouseenter', function() {
-        $('.carousel').slick('slickSetOption', 'autoplay', false).slick('slickPause');
-      });
-      $('#becomeMemberDialog').on('mouseleave', function() {
-        $('.carousel').slick('slickSetOption', 'autoplay', true).slick('slickPlay');
-      });
+  $(document).ready(function () {
+    $('.banner-button-info').on('click', function() {
+      $('.carousel').slick('slickSetOption', 'autoplay', false).slick('slickPause');
+    });
+    $('.banner-button-info').on('mouseenter', function() {
+      $('.carousel').slick('slickSetOption', 'autoplay', false).slick('slickPause');
+    });
+    $('.banner-button-info').on('mouseleave', function() {
+      $('.carousel').slick('slickSetOption', 'autoplay', true).slick('slickPlay');
+    });
+    $('#becomeMemberDialog').on('mouseenter', function() {
+      $('.carousel').slick('slickSetOption', 'autoplay', false).slick('slickPause');
+    });
+    $('#becomeMemberDialog').on('mouseleave', function() {
+      $('.carousel').slick('slickSetOption', 'autoplay', true).slick('slickPlay');
+    });
 
-      $('.slick-track').on('click', function(){
-        $('.carousel').slick('slickSetOption', 'autoplay', false).slick('slickPause');
-      })
-        $('.carousel').slick({ infinite: true, dots: true, arrows: false, autoplay: true, autoplaySpeed: 7000, pauseOnHover: false })
-      $('.slick-initialized').on('swipe', function(event, slick, direction){
-        $('.carousel').slick('slickSetOption', 'autoplay', false).slick('slickPause');
-      });
+    $('.slick-track').on('click', function(){
+      $('.carousel').slick('slickSetOption', 'autoplay', false).slick('slickPause');
+    });
+    $(".carousel").on('init', function(event, slick) {
+      $("main").css("visibility", "visible");
+    });
+    $('.carousel').slick({ infinite: true, dots: true, arrows: false, autoplay: true, autoplaySpeed: 7000, pauseOnHover: false })
+    $('.slick-initialized').on('swipe', function(event, slick, direction) {
+      $('.carousel').slick('slickSetOption', 'autoplay', false).slick('slickPause');
     });
+  });
 </script> {% endblock %}
diff --git a/smallslive/templates/home_new.html b/smallslive/templates/home_new.html
@@ -51,7 +51,7 @@
 
   <div class="main-container pad-content {% if calendar %}calendar{% else %}home-new{% endif %}">
     {% block home_content %}
-    <main>
+    <main style="visibility: hidden;">
       {% include 'home_banners_carousel.html' %}
       <div class="event-stripe">
         {% include 'events/today_and_tomorrow.html' with custom_venue_style=True %}