How to prevent "jump-load" when loading home page first time

I have noticed that page loading does not look elegant on home page especially when using a slider (in the header). Although slider revolution has a built-in preloading feature, the page load jumps. This means: first the lower sections of the page are loaded and shown then slider revolution loads, preloading is shown (with preloading spinner) and then the whole slider is loaded inclusive compressed jpges.

How could I force to load first slider and then the rest of the page? Or better: How to include a full page preloading? I have bad experience (in SEO) with full page ajax loading plugins though…

Hi,

Unfortunately, there is no way to force the Revolution Slider loads first. You can try to set the fixed height for the slider to avoid this jump on page loading.

Regards

Thanks. How have your resolved this on your demos?

This problem exists on our demo as well. Try to set the fixed height for the slider to fix this.

Could not resolve this with fixed height.

Used Revolution Slider API instead:

//Set .site-content invisible to make "jump invisible"

jQuery(document).ready(function($) {
	//Hide jumping content above Slider
	$(".site-content").css('visibility', 'hidden');
});

//Set .site-content visible on slider event "loaded"
    revapi19.bind("revolution.slide.onloaded",function (e) {
		console.log("slider loaded");
		jQuery(".site-content").css('visibility', 'visible');
	});

Great, we are glad that you have found the solution.

Better Fix:

In functions.php:

add_filter( 'body_class','my_body_classes' );
function my_body_classes( $classes ) {
 
    if ( is_front_page() ) {
     
        $classes[] = 'has-revolution-slider';
         
    }
     
    return $classes;
     
}

In custom stylesheets:

body.has-revolution-slider .site-content {
  visibility: hidden;
}

In Slider Revolution Slider Settings at Custom Javascript:

revapi19.bind("revolution.slide.onloaded",function (e) {
		console.log("slider loaded");
		jQuery(".site-content").css('visibility', 'visible');
	});

Replace revapi19 with your relevant slider variable (See within Slider Settings)

Thank you for sharing your experience here.

[Author]

Posts