CODEWITHSUNDEEP
javascriptlazy-loadingblazy
Саша Черных
Саша Черных

Reputation: 2813

blazy.js simple example doesn't work

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

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

Upvotes: 1

Views: 2262

Answers (2)

Brad Ahrens
Brad Ahrens

Reputation: 5168

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.

Upvotes: 2

Fernando
Fernando

Reputation: 1278

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

  1. Add blazy.js to your website
  2. Add the 'b-lazy' class to the elements that should be lazy loaded
  3. Initialize blazy whenever you're ready

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

Upvotes: 2

Related Questions