blazy.js simple example doesn't work

Question

1. Summary

Simple blazy.js example doesn't work for me. I don't understand, what I do wrong.

2. Settings

I download and initialize blazy.js as write in official site.

My example markup:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/blazy/latest/blazy.min.js"></script>
    <script>
    var bLazy = new Blazy({
    });
    </script>
</head>

<body>
    <img class="b-lazy" data-src="https://i.imgur.com/OJSBK4V.jpg" alt="Queen of the World Sasha Chernykh">
    <img class="b-lazy" data-src="https://i.imgur.com/fTv7zgG.png" alt="Build 3114">
    <img class="b-lazy" data-src="https://i.imgur.com/9vnVBy4.png" alt="Build 3103">
    <img class="b-lazy" data-src="https://i.imgur.com/ljT5eJp.png" alt="SashaSublime">
    <img class="b-lazy" data-src="https://i.imgur.com/DlrJCes.png" alt="Overall plan details">
    <img class="b-lazy" data-src="https://i.imgur.com/VqeuQtH.png" alt="Gutter">
    <img class="b-lazy" data-src="https://i.imgur.com/3RPAwA7.png" alt="Autocomplete">
    <img class="b-lazy" data-src="https://i.imgur.com/CTOQ9WG.png" alt="Tabs">
    <img class="b-lazy" data-src="https://i.imgur.com/N8UWi1Q.png" alt="Side bar">
    <img class="b-lazy" data-src="https://i.imgur.com/FMo5NLK.png" alt="Indexing status">
    <img class="b-lazy" data-src="https://i.imgur.com/C2aZ7oy.png" alt="Phantom">
    <img class="b-lazy" data-src="https://i.imgur.com/YnfYXWD.png" alt="Sublimerge">
    <img class="b-lazy" data-src="https://i.imgur.com/c0t0Iqy.png" alt="Hex Viewer">
    <img class="b-lazy" data-src="https://i.imgur.com/24kzw67.png" alt="GitGutter and SublimeLinter">
    <img class="b-lazy" data-src="https://i.imgur.com/S8SE9nh.png" alt="BracketHighlighter">
    <img class="b-lazy" data-src="https://i.imgur.com/Arhzbgl.png" alt="Emmet">
    <img class="b-lazy" data-src="https://i.imgur.com/ZcmyymH.png" alt="Color Helper">
    <img class="b-lazy" data-src="https://i.imgur.com/LCTE0Y2.png" alt="sublime_unicode_nbsp" />
    <img class="b-lazy" data-src="https://i.imgur.com/yJ2EdbD.png" alt="Accentuation">
    <img class="b-lazy" data-src="https://i.imgur.com/y715wdq.png" alt="Accentuation2">
    <img class="b-lazy" data-src="https://i.imgur.com/Z3lGryq.png" alt="Find result">
    <img class="b-lazy" data-src="https://i.imgur.com/Tyqv7to.png" alt="Find result2">
    <img class="b-lazy" data-src="https://i.imgur.com/2hRinyv.png" alt="GotoAnything panel">
    <img class="b-lazy" data-src="https://i.imgur.com/YVcfF0k.png" alt="Switch Project panel">
    <img class="b-lazy" data-src="https://i.imgur.com/H6tolbC.png" alt="Find and Replace panel">
    <img class="b-lazy" data-src="https://i.imgur.com/JwQyqyU.png" alt="Console">
    <img class="b-lazy" data-src="https://i.imgur.com/4s81HhM.png" alt="Build console">
</body>

</html>

This code in demonstration page: https://kristinitatest.github.io/Stack%20Exchange/HTML+CSS/Blazy/BlazyTest.html.

3. Steps to reproduce

I open https://kristinitatest.github.io/Stack%20Exchange/HTML+CSS/Blazy/BlazyTest.html → I open Firefox built-in console.

4. Expected behavior

Lazy loading for images.

5. Actual behavior

Reproduce in Chrome.

All images in web-page at once download for me, not lazy loading.

6. Not helped

I add src attribute for all images,
I use blazy options,
I use relative paths for images instead of absolute paths.

score 2 · Answer 1 · answered May 10 '17 at 13:27

I haven't tried, but look at this in blazy.js page:

Add blazy.js to your website

Add the 'b-lazy' class to the elements that should be lazy loaded

Initialize blazy whenever you're ready

You have done 1,3,2 instead of 1,2,3. That might be the problem.

score 2 · Answer 2 · answered Apr 30 '19 at 09:43

I had the same problem a bit earlier.

One thing that I think Bjoern Klinggaard forgets to emphasise in the documentation is the need for a placeholder image. Once you put this in there, then it will work.

For example instead of:

 <img class="b-lazy" data-src="https://i.imgur.com/OJSBK4V.jpg">

add a placeholder image, such as:

 <img class="b-lazy" data-src="https://i.imgur.com/OJSBK4V.jpg" src="http://placehold.it/500x250&text=placeholder" >

This then was working for me. Give it a shot.

Hope this helps!

*Note that I am using blazy v1.8.2 - 2016.10.25

This solution may not work for other versions. However, since it was released prior to the original poster's message, the solution should still be valid.