Re-size/orientation change with background images

[csdougliss]

Hi,

When I use b-lazy to lazy load a background image set as data-src this works well. But my site is responsive so I am specifying data-src (default e.g. 320px or should that be the largest?), medium (770px) and large (> 771). When I re-size or re-orientate the device, the new image is not being used - only the one used first time is applied.

Also the data-src attributes are destroyed when b-lazy has finished applying.

My div:

<div class="b-lazy" src="placeholder.jpg"
     data-src-medium="/images/600/Specifications.jpg')"
     data-src-large="images/template/landingpage/features/980/Specifications.jpg">
</div>

My java script:

<script type="text/javascript">
        jQuery(document).ready(function($j) {
            var bLazy = new Blazy({
                breakpoints: [
                {
                    width: 770, // max-width
                    src: 'data-src-medium',
                    mode: 'viewport'
                },
                {
                    width: 99999, // max-width
                    src: 'data-src-large',
                    mode: 'viewport'
                }],
                selector: 'img,.b-lazy', // all images
                offset: 200 // Loads images 200px before they're visible
            });
        });
    </script>

I tried the following, but as of yet have been unable to get it to work:

var isIOS = /safari/g.test(navigator.userAgent.toLowerCase());
            var ev = isIOS ? 'orientationchange' : 'resize';
            var diff = (window.innerWidth-window.innerHeight);
            $j(window).bind(ev,function(){
                setTimeout(function(){
                    if(diff*((window.innerWidth-window.innerHeight)) < 0)
                        orientationChanged();
                }, 500);
            });

            function orientationChanged() {
                console.log("orientation changed");
                $j('div.b-lazy').removeClass('b-loaded');
                bLazy.revalidate();
            }

[dinbror]

Hey Craig.

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. You can emulate device widths in chrome: https://developers.google.com/chrome-developer-tools/docs/mobile-emulation#enable-emulation-panel.

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.

Hope it make sense :)
Bjørn

[csdougliss]

@dinbror Hi, that makes perfect sense. The only issue in our application is when a customer re-sizes their browser it would mean missing images. Would it be possible to make this a configurable option so we can do it either way?

[ArmorDarks]

This won't work well in case of changing of orientation on tablets. Script should try to reload images in case of width changes, otherwise you might switch from portrait to landscape view and find yourself in quite sad situation.