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

问题描述 投票：1回答：2

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.没有帮助

  1. 我为所有图像添加src属性，
  2. 我用blazy options，
  3. 我使用图像的相对路径而不是绝对路径。
javascript lazy-loading blazy
2个回答
2
投票

我没试过，但在blazy.js page看看这个：

  1. 将blazy.js添加到您的网站
  2. 将'b-lazy'类添加到应该延迟加载的元素中
  3. 只要你准备好就初始化blazy

你做了1,3,2而不是1,2,3。这可能是问题所在。

1
投票

我早一点遇到同样的问题。

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

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.