1。摘要
简单 blazy.js 示例对我不起作用。我不明白，我做错了什么。
2。设置
我在官方网站中下载并初始化blazy.js为Write 。
我的示例标记：
<!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>演示页面中的此代码： https://kristinitatest.github.io/stack exchange/html css/blazy/blazytest.html 。
3。复制步骤
i打开 https://kristinitatest.github.io/stack Exchange/html css/blazy/blazytest.htest.html →我打开Firefox infiefox infiefox internedin inside-in Console。
4。预期行为
图像的懒惰加载。
5。实际行为
在Chrome中繁殖。
立即下载网页中的所有图像，而不是懒惰的加载。
6。没有帮助
- 我为所有图像添加
src属性， - 我使用blazy 选项，
- 我将相对路径用于图像而不是绝对路径。
我没有尝试过，但请在blazy.js页面上查看这个：
- 将blazy.js添加到您的网站
- 将" B-Lazy"类添加到应该懒惰的元素
- 每当您准备就绪时初始化blazy
您做过1,3,2而不是1,2,3。这可能是问题。
我较早有相同的问题。
我认为Bjoern Klinggaard忘记在文档中强调的一件事是需要占位符图像。一旦将其放在那里，它将起作用。
例如：
<img class="b-lazy" data-src="https://i.imgur.com/OJSBK4V.jpg">
添加一个占位符图像，例如：
<img class="b-lazy" data-src="https://i.imgur.com/OJSBK4V.jpg" src="http://placehold.it/500x250&text=placeholder" >
这为我工作。试一试。
希望这会有所帮助！
*请注意，我正在使用Blazy V1.8.2-2016.10.25
此解决方案可能不适用于其他版本。但是，由于它是在发布原始海报的消息之前发布的，因此该解决方案仍应有效。