blazy does not change images source on window resize

[nntgwww]

I have tested it on my local. Image won't change source when window resize. I looked at demo page and try to resize window. But when it first load big-bear, it won't load small-bear image below 420px;

<img src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
                                     data-src="/assets/images/banner-1-lg.jpg"
                                     data-src-sm="/assets/images/banner-1-sm.jpg"
                                     data-src-mobile="/assets/images/banner-1.jpg"
                                     class="b-lazy">

var bLazy = new Blazy({
        breakpoints: [{
            width: 480
            , src: 'data-src-mobile'
        }
            , {
                width: 767
                , src: 'data-src-xs'
            }
            , {
                width: 991
                , src: 'data-src-sm'
            }
        ]
    });

[dinbror]

Hey @nntgwww .

The breakpoints are defined by the device width not the browser width. It means that it’ll look at your screen width which won’t change when you resize your browser window.
The reason why I’m looking at the device width and not the width is that I don’t want to load multiple image sources for the same image when you resize (multiple server request per image). And if you have a big screen but the start width of your browser window is something small I don’t want to upscale a low res image if you resize it up.

[nntgwww]

Ok thank you for your reply. I want to achieve this because my layout will be broken if user resize the window (Row, Grid, Fluid will change order and images too...) also designer want to load different images for each screen size... If you can add this featured it will be good for case like me :).
Love ur plugin like bPopup very lightweight :)