Lazy Loading and Multiserving Images using bLazy

Question

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.

bLazy.js · Accepted Answer · 2014-03-12 19:10:03Z

1

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.

answered Mar 12, 2014 at 19:10

bLazy.js

111 bronze badge

Sign up to request clarification or add additional context in comments.

4 Comments

user742030 Over a year ago

Thnx but I already know all this. I have tried this with 5 handhelds and 3 machines down to a 798px net-book(nothing loads) - and Chromes(Canary) emulators. You can access the site now... Iv'e tested your demo pg & it works in all situations (down to 380px - loads small-bear.jpg)...And I just left the place-holder out on the example but its there in the working example.

user742030 Over a year ago

P.S. As I mentioned on your site feedback, background images will not load in <div> wrapped in <li> but works everywhere else. This example/issue is <img> wrapped in <li>. Could be a bug??

user742030 Over a year ago

interesting, If I replace the <li> tags with <div> that are wrapped around the <img> tags, everything loads but not the correct size.....?

Bruno Over a year ago

Hey Andaero. I'm back again. Was out traveling. You have closed your site again :) Just made a quick codepen where I lazy load images and background images in an unordered list: codepen.io/dinbror/pen/Kaoxr

Collectives™ on Stack Overflow

Lazy Loading and Multiserving Images using bLazy

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related