Kortic, Anthony Ladeuil

background-image responsive

    La conception Responsive impose des contraintes de performance et d'adaptation selon le terminal utilisé. Pour les images en ligne classiques, l'utilsation de balises picture figure et les attributs ad hoc de gestion de sources selon les viewports gèrent facilement cette nécessité.

    Concernant les images gérées en arrière plan, il devient plus compliqué de fournir des formats adaptés à la taille d'affichage et à la qualité de la bande passante. Il n'est pas rare de distribuer des images de très grandes dimensions dans des zones réduites, notamment en mobile.

    Un petit script va résoudre ce souci et améliorer l'expérience utilisateur au passage.

    Exemple

    Redimensionner le navigateur pour appliquer le changement d'image de fond

    Container avec attribut data-backgrounds='[
        {
            "min": 0,
            "max": 479,
            "url": "\/\/pictures.kortic.com\/500x250\/ff8800"
        },
        {
            "min": 480,
            "max": 767,
            "url": "\/\/pictures.kortic.com\/800x400\/ff0033"
        },
        {
            "min": 768,
            "max": 1299,
            "url": "\/\/pictures.kortic.com\/800x500"
        },
        {
            "min": 1300,
            "max": 10000000,
            "url": "\/\/pictures.kortic.com\/1300x650\/ff8800"
        }
    ]'

    Code

    Nécessite jQuery

    ;(function($){

        'use strict';

        $.fn.RWDbackgrounds = function(options_){

            var settings_ = $.extend({
                    'attribute': 'backgrounds',
                }, options_),

                attribute_    = settings_.attribute,
                background_    = null,
                window_w    = $(window).width();

            $(this).each(function() {

                let element_ = $(this),
                    values_ = $.parseJSON(element_.attr('data-' + attribute_));

                for(let i in values_) {

                    if(window_w >= values_[i].min && window_w <= values_[i].max) {
                        background_ = values_[i].url;
                        break;
                    }
                }

                element_.css({
                    'background-image': 'url(' + background_ + ')'
                }).addClass('background-loaded');

                return this;
            });

        };

    }(jQuery));
    Si vous souhaitez participer, même modestement, au maintien du site et pour son usage, vous pouvez cliquer sur le joli bouton…

    Appel de la fonction

    Redimensionner le navigateur pour appliquer le changement d'image de fond

    <script>
    $(document).ready( function() {
            
        $('.rwdbg').RWDbackgrounds();
            
        // optionnel pour gérer la bascule sur tablette/mobile
        $(window).on('resize', function(){
            $('.rwdbg').RWDbackgrounds();
        });
    });
    </script>
    Voir aussi…
    2019-11-22