Question

1。摘要

简单的blazy.js示例对我不起作用。我不明白，我做错了什么。

2。设置

我下载并初始化blazy.js为in official site。

我的示例标记：

<!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%20Exchange/HTML+CSS/Blazy/BlazyTest.html 。

3。重现的步骤

我打开 https://kristinitatest.github.io/Stack%20Exchange/HTML+CSS/Blazy/BlazyTest.html →我打开Firefox内置控制台。

4。预期的行为

延迟加载图片。

5。实际行为

在Chrome中重现。

网页中的所有图片都会立即为我下载，而不是延迟加载。

6。没帮忙

我为所有图片添加src属性
我使用blazy options，
我使用图像的相对路径而不是绝对路径。

Answer 1

我还没试过，但请看blazy.js page：

将blazy.js添加到您的网站

添加＆＃39;懒惰＆＃39;类到应该延迟加载的元素

每当您准备好
时初始化blazy

你已经完成了1,3,2而不是1,2,3。这可能是问题所在。

Answer 2

我早些时候遇到过同样的问题。

我认为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

此解决方案可能不适用于其他版本。但是，由于它是在原始发帖人的消息之前发布的，因此该解决方案仍然应该有效。

blazy.js简单的例子不起作用