gpt4 book ai didi

javascript - blazy.js 简单示例不起作用

转载 作者:行者123 更新时间:2023-11-30 11:37:52 25 4
gpt4 key购买 nike

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. 我使用图像的相对路径而不是绝对路径。

最佳答案

我没试过,但在 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

您完成了 1、3、2 而不是 1、2、3。这可能是问题所在。

关于javascript - blazy.js 简单示例不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43716837/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com