Add lazyload on cards

diff --git a/app/static/src/js/index.js b/app/static/src/js/index.js
index 2ee143d71fd2329de696e989103a834bb53565b1..a8489c107cc87c95ce77ce5cc08eaafbdff9478f 100644 (file)
--- a/app/static/src/js/index.js
+++ b/app/static/src/js/index.js
@@ -14,6 +14,7 @@ var StickyKitInit = require('./modules/sticky-kit-init');
 var LightSliderPageInit = require('./modules/lightsliderpage-init');
 var LightSliderHomeInit = require('./modules/lightsliderhome-init');
 var LightSliderNetworkInit = require('./modules/lightslidernetwork-init');
+var LightSliderNetworkInit = require('./modules/lazyload-init');
 var HomeMenu = require('./modules/home-menu');
 var Audio = require('./modules/audio');
 
@@ -33,5 +34,6 @@ window[StickyKitInit] = new StickyKitInit();
 window[LightSliderPageInit] = new LightSliderPageInit();
 window[LightSliderHomeInit] = new LightSliderHomeInit();
 window[LightSliderNetworkInit] = new LightSliderNetworkInit();
+window[LazyLoadInit] = new LazyLoadInit();
 window[HomeMenu] = new HomeMenu();
 window[Audio] = new Audio();

diff --git a/app/static/src/js/modules/lazyload-init.js b/app/static/src/js/modules/lazyload-init.js
new file mode 100644 (file)
index 0000000..1867fde
--- /dev/null
+++ b/app/static/src/js/modules/lazyload-init.js
@@ -0,0 +1,20 @@
+var LazyLoadInit = function() {
+
+    //
+    // Init
+    //
+    this.init();
+
+};
+
+LazyLoadInit.prototype.init = function() {
+
+    var that = this;
+
+    $("img.lazyload").lazyload({
+        effect : "fadeIn"
+    });
+
+};
+
+module.exports = LazyLoadInit;

diff --git a/app/static/src/sass/modules/boxes/_article-box.scss b/app/static/src/sass/modules/boxes/_article-box.scss
index 1b93349177e36c34abcd73ef5f59b0beaf9cf944..e31c6fe7256bf640e474f04b815a600b106228ae 100644 (file)
--- a/app/static/src/sass/modules/boxes/_article-box.scss
+++ b/app/static/src/sass/modules/boxes/_article-box.scss
@@ -27,6 +27,8 @@ $module: ".article-box";
         width: 100%;
         position: relative;
 
+        @include fluid-aspect(427 286);
+
         img {
             display: block;
             width: 100%;

diff --git a/app/templates/agenda/includes/event_card.html b/app/templates/agenda/includes/event_card.html
index 45490b3ec71ef0fd42810254bd8cd7a23bbf35e6..03a18d7c1350c742756cec97dbedd8fbf39577d4 100644 (file)
--- a/app/templates/agenda/includes/event_card.html
+++ b/app/templates/agenda/includes/event_card.html
@@ -17,7 +17,7 @@
     <figure class="article-box__image">
         {% with event.images.all|get_type:'card' as images %}
             {% if images %}
-                <img src="{{ MEDIA_URL }}{% thumbnail images.0.file 427 286 top=0.5 left=article.photo_alignment|get_photo_alignment %}" data-src="{{ MEDIA_URL }}{% thumbnail images.0.file 427 286 %}" class="lazyload" />
+                <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-original="{{ MEDIA_URL }}{% thumbnail images.0.file 427 286 top=0.5 left=article.photo_alignment|get_photo_alignment %}" class="lazyload" />
             {% endif %}
         {% endwith %}
     </figure>

diff --git a/app/templates/agenda/includes/event_linecard.html b/app/templates/agenda/includes/event_linecard.html
index c6a5a5b6b262207e9e3533ed005e5470f1ccdb25..7884195a1409a3d39c1cd3f2e8f187f31ee5909e 100644 (file)
--- a/app/templates/agenda/includes/event_linecard.html
+++ b/app/templates/agenda/includes/event_linecard.html
@@ -25,13 +25,13 @@
                 {% with event.images.all|get_type:'card' as images %}
                     {% if images %}
                         <a href="{{ event.get_absolute_url }}">
-                            <img class="event-line-box__image" src="{{ MEDIA_URL }}{% thumbnail images.0.file 203 140 %}" width="203" height="140">
+                            <img class="event-line-box__image" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-original="{{ MEDIA_URL }}{% thumbnail images.0.file 203 140 %}" width="203" height="140" class="lazyload">
                         </a>
                     {% else %}
                         {% with event.parent.images.all|get_type:'card' as images %}
                             {% if images %}
                                 <a href="{{ event.get_absolute_url }}">
-                                    <img class="event-line-box__image" src="{{ MEDIA_URL }}{% thumbnail images.0.file 203 140 %}" width="203" height="140">
+                                    <img class="event-line-box__image" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-original="{{ MEDIA_URL }}{% thumbnail images.0.file 203 140 %}" width="203" height="140" class="lazyload">
                                 </a>
                             {% endif %}
                         {% endwith %}

diff --git a/app/templates/includes/footer_scripts.html b/app/templates/includes/footer_scripts.html
index fce37b29133cd84bbb4cb4625b1a6587ad8649a1..f0da2e924eac5b7c533c3e0c68827905f70dcd08 100644 (file)
--- a/app/templates/includes/footer_scripts.html
+++ b/app/templates/includes/footer_scripts.html
@@ -11,6 +11,7 @@
     <script src="{% static "vendors/video.js/dist/video.js" %}"></script>
     <script src="{% static "vendors/videojs-playlist/dist/videojs-playlist.js" %}"></script>
     <script src="{% static "vendors/audiojs/audiojs/audio.js" %}"></script>
+    <script src="{% static "vendors/jquery_lazyload/jquery.lazyload.js" %}"></script>
     <script src="{% static "js/index.min.js" %}"></script>
 {% block extra_js %}{% endblock %}
 {% editable_loader %}

diff --git a/app/templates/magazine/article/includes/article_card.html b/app/templates/magazine/article/includes/article_card.html
index ef3a2e379c7a63fd18a6602e994850f4cd8b1867..f3e0aa974742ae69109331e96a5da971c881be2b 100644 (file)
--- a/app/templates/magazine/article/includes/article_card.html
+++ b/app/templates/magazine/article/includes/article_card.html
@@ -14,13 +14,17 @@
 {% endblock %}
 
 {% block image %}
-    <figure class="article-box__image">
-        {% with article.images.all|get_type:'card' as images %}
-            {% if images %}
-                <img src="{{ MEDIA_URL }}{% thumbnail images.0.file 427 286 top=0.5 left=article.photo_alignment|get_photo_alignment %}" data-src="{{ MEDIA_URL }}{% thumbnail images.0.file 427 286 %}" class="lazyload" />
-            {% endif %}
-        {% endwith %}
-    </figure>
+    {% with article.images.all|get_type:'card' as images %}
+        {% if images %}
+            <figure class="article-box__image">
+                <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-original="{{ MEDIA_URL }}{% thumbnail images.0.file 427 286 top=0.5 left=article.photo_alignment|get_photo_alignment %}" class="lazyload" />
+            </figure>
+        {% else %}
+            <figure class="article-box__image">
+
+            </figure>
+        {% endif %}
+    {% endwith %}
 {% endblock %}
 
 {% block tags %}

diff --git a/app/templates/pages/includes/page_card.html b/app/templates/pages/includes/page_card.html
index 7a900714881d29b142e3c014c031781f9c1178d0..22a5c391cd828ac2431b1ec431fc0272dfff18bf 100644 (file)
--- a/app/templates/pages/includes/page_card.html
+++ b/app/templates/pages/includes/page_card.html
@@ -17,7 +17,7 @@
     {% with page.images.all|get_type:'card' as images %}
         {% if images %}
             <figure class="article-box__image">
-                <img src="{{ MEDIA_URL }}{% thumbnail images.0.file 427 286 top=0.5 left=article.photo_alignment|get_photo_alignment %}" data-src="{{ MEDIA_URL }}{% thumbnail images.0.file 427 286 %}" class="lazyload" />
+                <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-original="{{ MEDIA_URL }}{% thumbnail images.0.file 427 286 top=0.5 left=article.photo_alignment|get_photo_alignment %}" class="lazyload" />
             </figure>
         {% endif %}
     {% endwith %}

diff --git a/bower.json b/bower.json
index e4e0f4e882960163ebe540c52a19926d28fa09eb..e078b904b3ba24b9d92e907bb391cc18f61f2cbd 100644 (file)
--- a/bower.json
+++ b/bower.json
@@ -27,6 +27,7 @@
     "pushy": "^1.0.0",
     "audiojs": "^1.0.1",
     "video.js": "^5.13.0",
-    "videojs-playlist": "^2.4.0"
+    "videojs-playlist": "^2.4.0",
+    "jquery_lazyload": "jquery.lazyload#^1.9.7"
   }
 }