From df65fd11847398c687f63c1297b4429caafda31e Mon Sep 17 00:00:00 2001 From: bAndie91 Date: Tue, 5 Apr 2016 09:31:54 +0200 Subject: [PATCH 1/2] implement basic lazy-load of images --- static/js/moonstrap.js | 7 ++++++- templates/munin-categoryview.tmpl | 8 ++++---- templates/munin-comparison-day.tmpl | 2 +- templates/munin-comparison-month.tmpl | 2 +- templates/munin-comparison-week.tmpl | 2 +- templates/munin-comparison-year.tmpl | 2 +- templates/munin-nodeview.tmpl | 4 ++-- templates/munin-problemview.tmpl | 12 ++++++------ templates/munin-serviceview.tmpl | 8 ++++---- 9 files changed, 26 insertions(+), 21 deletions(-) diff --git a/static/js/moonstrap.js b/static/js/moonstrap.js index 2046fd1..16d4a4d 100644 --- a/static/js/moonstrap.js +++ b/static/js/moonstrap.js @@ -106,6 +106,11 @@ $("a").on('click', function(e) { var collapse = $("#body-" + hash.substring(1)); if(!$(this).attr("data-toggle") || !collapse || !collapse.hasClass("collapse") || (collapse.hasClass("collapse") && !collapse.hasClass("in"))){ collapse.collapse('show'); + $('#body-' + hash.substring(1) + ' img.munin-graph').each(function() + { + var src = $(this).data('src'); + if(src) this.src = src; + }); $('html, body').animate({ scrollTop: top }, 500, function(){ @@ -129,4 +134,4 @@ $(document).ready(function() { scrollTop: top }, 500); } -}); \ No newline at end of file +}); diff --git a/templates/munin-categoryview.tmpl b/templates/munin-categoryview.tmpl index 5a9e150..a54c2ef 100644 --- a/templates/munin-categoryview.tmpl +++ b/templates/munin-categoryview.tmpl @@ -38,16 +38,16 @@ "> - " alt=""/> + " alt=""/> - " alt=""/> + " alt=""/> - " alt=""/> + " alt=""/> - " alt=""/> + " alt=""/> diff --git a/templates/munin-comparison-day.tmpl b/templates/munin-comparison-day.tmpl index 727164c..d459741 100644 --- a/templates/munin-comparison-day.tmpl +++ b/templates/munin-comparison-day.tmpl @@ -34,7 +34,7 @@
  • /">
    • /"> - " alt=""/> + " alt=""/> diff --git a/templates/munin-comparison-month.tmpl b/templates/munin-comparison-month.tmpl index 62987f3..798e461 100644 --- a/templates/munin-comparison-month.tmpl +++ b/templates/munin-comparison-month.tmpl @@ -34,7 +34,7 @@
  • /">
    • /"> - " alt=""/> + " alt=""/> diff --git a/templates/munin-comparison-week.tmpl b/templates/munin-comparison-week.tmpl index 0964876..6588180 100644 --- a/templates/munin-comparison-week.tmpl +++ b/templates/munin-comparison-week.tmpl @@ -34,7 +34,7 @@
  • /">
    • /"> - " alt=""/> + " alt=""/> diff --git a/templates/munin-comparison-year.tmpl b/templates/munin-comparison-year.tmpl index 2171498..b5ed730 100644 --- a/templates/munin-comparison-year.tmpl +++ b/templates/munin-comparison-year.tmpl @@ -34,7 +34,7 @@
  • /">
    • /"> - " alt=""/> + " alt=""/> diff --git a/templates/munin-nodeview.tmpl b/templates/munin-nodeview.tmpl index 3038ced..046f6a7 100644 --- a/templates/munin-nodeview.tmpl +++ b/templates/munin-nodeview.tmpl @@ -28,12 +28,12 @@
    "> - " alt="" /> + " alt="" />
    "> - " alt="" /> + " alt="" />
    diff --git a/templates/munin-problemview.tmpl b/templates/munin-problemview.tmpl index 3424389..09b6723 100644 --- a/templates/munin-problemview.tmpl +++ b/templates/munin-problemview.tmpl @@ -36,12 +36,12 @@
    /"> - " alt=""/> + " alt=""/>
    /"> - " alt="" /> + " alt="" />
    @@ -80,12 +80,12 @@
    /"> - " alt=""/> + " alt=""/>
    /"> - " alt="" /> + " alt="" />
    @@ -124,12 +124,12 @@
    /"> - " alt=""/> + " alt=""/>
    /"> - " alt="" /> + " alt="" />
    diff --git a/templates/munin-serviceview.tmpl b/templates/munin-serviceview.tmpl index 3551bb0..077ee46 100644 --- a/templates/munin-serviceview.tmpl +++ b/templates/munin-serviceview.tmpl @@ -32,18 +32,18 @@
  • - " alt="" data-href=""/> + " alt="" data-href=""/>
    - " alt="" data-href=""/> + " alt="" data-href=""/>
    - " alt="" data-href=""/> + " alt="" data-href=""/>
    - " alt="" data-href=""/> + " alt="" data-href=""/>
    • From 0580fd3e761f2f7cda2b40a2cbf9699bf9dcd9e0 Mon Sep 17 00:00:00 2001 From: bAndie91 Date: Tue, 12 Apr 2016 09:42:28 +0200 Subject: [PATCH 2/2] image lazy-load on services page --- static/js/moonstrap.js | 23 ++++++++++++++++------- templates/munin-serviceview.tmpl | 8 ++++---- 2 files changed, 20 insertions(+), 11 deletions(-) diff --git a/static/js/moonstrap.js b/static/js/moonstrap.js index 16d4a4d..7293b95 100644 --- a/static/js/moonstrap.js +++ b/static/js/moonstrap.js @@ -74,6 +74,16 @@ function collapseRefresh(){ } } +function lazyLoad(cnt) +{ + if(!cnt) cnt = ".panel-collapse.in"; + $(cnt + ' img.munin-graph').each(function() + { + var src = $(this).data('src'); + if(src) this.src = src; + }); +} + $(document).ready(function() { collapseRefresh(); @@ -103,14 +113,11 @@ $("a").on('click', function(e) { if(this.pathname == location.pathname){ e.preventDefault(); var top = $(hash).offset().top - 5; - var collapse = $("#body-" + hash.substring(1)); + var slctr = "#body-" + hash.substring(1); + var collapse = $(slctr); if(!$(this).attr("data-toggle") || !collapse || !collapse.hasClass("collapse") || (collapse.hasClass("collapse") && !collapse.hasClass("in"))){ collapse.collapse('show'); - $('#body-' + hash.substring(1) + ' img.munin-graph').each(function() - { - var src = $(this).data('src'); - if(src) this.src = src; - }); + lazyLoad(slctr); $('html, body').animate({ scrollTop: top }, 500, function(){ @@ -126,9 +133,11 @@ $(document).ready(function() { if (location.hash){ var hash = location.hash; var top = $(hash).offset().top - 5; - var collapse = $("#body-" + hash.substring(1)); + var slctr = "#body-" + hash.substring(1); + var collapse = $(slctr); if (collapse){ collapse.collapse('show'); + lazyLoad(slctr); } $('html, body').animate({ scrollTop: top diff --git a/templates/munin-serviceview.tmpl b/templates/munin-serviceview.tmpl index 077ee46..3551bb0 100644 --- a/templates/munin-serviceview.tmpl +++ b/templates/munin-serviceview.tmpl @@ -32,18 +32,18 @@
  • - " alt="" data-href=""/> + " alt="" data-href=""/>
    - " alt="" data-href=""/> + " alt="" data-href=""/>
    - " alt="" data-href=""/> + " alt="" data-href=""/>
    - " alt="" data-href=""/> + " alt="" data-href=""/>