Backstretch.js and thumbnail sizes to reduce loading time

If you were to use mediaqueries, you’d have to selectively dis- and enable DOM elements to which you have applied different images.

Rather than that, I’d recommend conditionally applying different images to the same element, i.e. the <body> and keeping the condition inside the JS.

wp_localize_script is capable of passing several parameters to the script. I’d say pass several image sizes like so:

$script_parameters = array(
    'small' => wp_get_attachment_image_src( get_post_thumbnail_id(), array(150, 150)),
    'medium' => wp_get_attachment_image_src( get_post_thumbnail_id(), array(250, 250)),
    'large' => wp_get_attachment_image_src( get_post_thumbnail_id(), array(350, 350))
);

wp_localize_script(
    'backstretch-set',
    'BackStretchImages',
    $script_parameters
);

And then expand the JS by a condition based on the screen/viewport width:

jQuery(document).ready(function($) {

    var viewportWidth = $(window).width();
    // same as "document.documentElement.clientWidth" (vanilla JS)

    if ( 768 > viewportWidth ) {
        $("body").backstretch([BackStretchImages.small[0]],{duration:3000,fade:750});
    } else if ( 1024 > viewportWidth ) {
        $("body").backstretch([BackStretchImages.medium[0]],{duration:3000,fade:750});
    } else {
        $("body").backstretch([BackStretchImages.large[0]],{duration:3000,fade:750});
    }
});

You can add as many sizes as you wish and adjust the viewport boundaries to your liking.

Related Posts: