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.

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
merged 2 commits into from
May 27, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
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
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