Merge pull request #1219 from Codeinwp/fix/pro/lazy-loading

Fixed lazy loading when disabled

Author: vytisbulkevicius

classes/Visualizer/Module/Frontend.php

@@ -47,7 +47,7 @@ class Visualizer_Module_Frontend extends Visualizer_Module {
 	 * @access private
 	 * @var bool
 	 */
-	private $lazy_render_script = false;
+	private $lazy_render_script = true;
 
 	/**
 	 * Constructor.
@@ -383,8 +383,9 @@ public function renderChart( $atts ) {
 		$lazy_load = isset( $settings['lazy_load_chart'] ) ? $settings['lazy_load_chart'] : false;
 		$lazy_load = apply_filters( 'visualizer_lazy_load_chart', $lazy_load, $chart->ID );
 		$container_class = 'visualizer-front-container';
-		if ( $lazy_load ) {
-			$this->lazy_render_script = true;
+		if ( ! $lazy_load ) {
+			$this->lazy_render_script = false;
+		} else {
 			$container_class .= ' visualizer-lazy-render';
 		}
 

js/render-facade.js

@@ -128,16 +128,30 @@ var vizClipboard1=null;
     }
 
     function displayChartsOnFrontEnd() {
+        $(window).on('scroll', function() {
+            $('div.visualizer-front:not(.viz-facade-loaded):not(.visualizer-lazy):not(.visualizer-cw-error):empty').each(function(index, element){
+                // Do not render charts that are intentionally hidden.
+                const style = window.getComputedStyle(element);
+                if (style.display === 'none' || style.visibility === 'hidden') {
+                    return;
+                }
 
-        $('div.visualizer-front:not(.viz-facade-loaded):not(.visualizer-lazy):not(.visualizer-cw-error):empty').each(function(index, element){
+                const id = $(element).addClass('viz-facade-loaded').attr('id');
+                setTimeout(function(){
+                    // Add a short delay between each chart to avoid overloading the browser event loop.
+                    showChart(id);
+                }, ( index + 1 ) * 100);
+            });
+        });
 
+        $('div.visualizer-front-container:not(.visualizer-lazy-render)').each(function(index, element){
             // Do not render charts that are intentionally hidden.
-            var style = window.getComputedStyle(element);
+            const style = window.getComputedStyle($(element).find('.visualizer-front')[0]);
             if (style.display === 'none' || style.visibility === 'hidden') {
                 return;
             }
-           
-            var id = $(element).addClass('viz-facade-loaded').attr('id');
+
+            const id = $(element).find('.visualizer-front').addClass('viz-facade-loaded').attr('id');
             setTimeout(function(){
                 // Add a short delay between each chart to avoid overloading the browser event loop.
                 showChart(id);