CODEWITHSUNDEEP
javascriptresponsive-designlazy-loading
user742030
user742030

Reputation:

Lazy Loading and Multiserving Images using bLazy

I am using(trying) a lazy loading script called bLazy found here->. The script also supports multiserving of images but I cannot seem to get it to load images if the veiwport is smaller than 1298px [even-though I don't have a call for that size]. This happens in any browser. I also noticed if you drag the window width beyond 1300px after a refresh under 1298px the script fires and the images are downloaded.

From all I can tell on the developers page, this plug works w/o flaw so I am thinking its something on my end.

I am also using JcorsLoader to defer all my scripts in parallel & to initialize everything - and everything I put in it works fine so I doubt it has anything to do with my issue posted here...?

This is how bLazy is loaded and initialized:

JcorsLoader.load(

..., //jQuery loaded here then bLazy

'/assets/js/bLazy.js',
    function() {
        var bLazy = new Blazy({
            breakpoints: [ //--max-width -->
                {width: 480, src: 'data-src-small'},
                {width: 768, src: 'data-src-medium'},
                {width: 1024, src: 'data-src-large'},
            ]
        });
    },

... //And other scripts/libraries here
);

The HTML mark up:

. . .
<li>
    <img class="b-lazy"
        src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
        data-src="http://myCDN.com/image/upload/f_auto/v1394566529/IQGIX3.jpg"
        data-src-small="http://myCDN.com/image/upload/f_auto/v1394590286/IQGIX3-small.jpg"
        data-src-medium="http://myCDN.com/image/upload/f_auto/v1394566529/IQGIX3-medium.jpg"
        alt="alt-text" />
    <!-- Fallback content for non-JS browsers. -->
    <noscript><img src="http:myCDN.com/image/upload/f_auto/v1394566529/IQGIX3.jpg" alt="Alt text"/></noscript>
</li>
. . .

Also note that if I do not use the multi-serve (see below example) feature I get the same results - No image loading if the view port is smaller than 1298px.

JcorsLoader.load(
    '/wp-content/themes/WalkingFish/assets/js/bLazy.js',
    function() {
        var bLazy = new Blazy();
    }
);

<li>// Mark up -->
    <img class="b-lazy"
        src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
        data-src="http://myCDN.com/image/upload/f_auto/v1394566529/IQGIX3.jpg"
        alt="alt-text" />
    <!-- Fallback content for non-JS browsers. -->
    <noscript><img src="http://myCDN.com/image/upload/f_auto/v1394566529/IQGIX3.jpg" alt="Alt text"/></noscript>
</li>

The site I am working on is not live but I'll open it up here so you can inspect the use for any flaws. Also take note to the waterfall.

Thnx for your help - I will be greatly appreciated!!

*EDIT * I ended up moving on to another solution that is working with out a hitch. bLazy seems to have a bug where it doesn't function within unordered lists. BttrLazyLoading.js works great - its just twice as heavy.

Upvotes: 1

Views: 2517

Answers (1)

bLazy.js
bLazy.js

Reputation: 11

Can't access your page. Quick info that might help you!

1) 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 browser 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 initial width of your browser window is something small I don’t want to upscale a low res image if you resize it up.

2) In your second example you don't have any placeholder src on your image why the image is 0px x 0px and won't load. You can either try to add a placeholder src or add a min-width greater than zero in CSS.

Upvotes: 1

Related Questions