Menu
I am experimenting with Ajax in an attmept to improve page loading times.
I have a slideshow with 7 slides, each image is 1200px x 400px and roughly 200-250KB in size
My plan: load the first image on Page Load and then load the other 6 slides after the DOM is loaded using Ajax.
I got it working ok using the following:
“`
jQuery( document ).ready( function( $ ) {
// make sure rslides exists on page
if ( $( “.rslides” ).length )
{
setTimeout(function(){ loadSlides($); }, 1000 );
}
}
function loadSlides($)
{
// Add nonce to formdata
formdata = new Array();
formdata.push({name: ‘action’, value: ‘omg_load_slides’ });
formdata.push({name: ‘nonce’, value: ajax_object.ajax_nonce });
jQuery.ajax({
type: “POST”,
url: ajax_object.ajaxurl,
data: formdata,
success: function(response) {
//Call callback function
loadSlidesCallback(response);
},
error: function(response) {
//Call callback function
loadSlidesCallback({“success”:0,”message”:”Unexpected error occurred”});
},
complete: function (data) {
// Initiate home banner slider
$(“.rslides”).responsiveSlides({
auto: true, // Boolean: Animate automatically, true or false
speed: 1000, // Integer: Speed of the transition, in milliseconds
timeout: 4000, // Integer: Time between slide transitions, in milliseconds
pager: false, // Boolean: Show pager, true or false
nav: true, // Boolean: Show navigation, true or false
random: false, // Boolean: Randomize the order of the slides, true or false
pause: false, // Boolean: Pause on hover, true or false
pauseControls: true, // Boolean: Pause when hovering controls, true or false
prevText: “”, // String: Text for the “previous” button
nextText: “”, // String: Text for the “next” button
maxwidth: “”, // Integer: Max-width of the slideshow, in pixels
navContainer: “”, // Selector: Where controls should be appended to, default is after the ‘ul’
manualControls: “”, // Selector: Declare custom pager navigation
namespace: “rslides”, // String: Change the default namespace used
before: function(){}, // Function: Before slide loads callback
after: function(){} // Function: After slide loads callback
});
}
});
}
function loadSlidesCallback(data)
{
var jdata = JSON.parse(data);
if(jdata.success)
{
jQuery(‘ul.rslides’).append(jdata.html);
}
}
BUT … When I do a speed test using GTMetrix or Pingdom, these images are still loaded in the Waterfall Chart
and still contribute to the Page Size and load speed… Is it possible call this function in alternative way so that it is not counted towards the page load or is this expected behaviour and can’t be avoided?