Skip to content

Fixed lazy loading when disabled #1219

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vytisbulkevicius merged 2 commits into from
May 27, 2025
+22 −7
Merged

Fixed lazy loading when disabled #1219

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e437454
fix lazy load
girishpanchal30 May 22, 2025
1fc7720
use const instead of var
girishpanchal30 May 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions classes/Visualizer/Module/Frontend.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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';
}

Expand Down
22 changes: 18 additions & 4 deletions js/render-facade.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
Loading