我正在使用 Lazy作为懒惰的图像加载插件。我有一个 div,我可以像这样加载 div:
<div class="nano-content" id="lScroll">
/*... MORE LIKE THIS ... */
<div class="card">
<div class="city-selected city-medium clickChampion pointer"
data-champ-id="1">
<article>
<div class="info">
<div class="city">
CHAMPNAME
</div>
</div>
</article>
<figure class="cFigure lazy" data-src="images/champions/CHAMPNAME_0.png"></figure>
</div>
</div>
/*... MORE LIKE THIS ... */
</div>
所以我启动了插件,它适用于第一个可见的和滚动的时候:
var $lazy = $('#lScroll .lazy');
if ($lazy.length) {
$lazy.Lazy({
appendScroll: $('#lScroll')
});
}
但是现在我有一个功能,当我在搜索输入中输入某项时,它可以通过 div 的属性“过滤”div,并且当显示相应的 div 时它无法加载图像:
$(document).on("keyup", "#searchVod", function () {
var $search = $(this);
var $sVal = $search.val().toLowerCase();
if ($sVal !== "") {
$(".vodCard").hide();
$('[data-champ*="' + $sVal + '"]').show();
$('[data-role*="' + $sVal + '"]').show();
} else {
$(".vodCard").show();
}
});
我尝试了 bind: "event"
/w 和 w/out delay: 0
(在搜索功能中加载插件)但是当我搜索时它会加载所有图片立即出现在背景中。
非常感谢任何提示
更新:我刚刚在 Chrome DevTab 中注意到,在我的搜索框中输入一个字母后,它加载了所有图像,最终加载了我正在搜索的图像(如果是最后一个,则需要一些时间(30MB sth)
最佳答案
有一个名为 Lozad.js
的优秀库,它可以帮助您更轻松地加载图像,就像延迟加载一样,但方式更简单。
可以下载here来自 Github。
演示页面 here .
解释:
该库将在按类名滚动到每个图像 anchor 时一张一张地加载您的图像。
示例
HTML:
在头部 ->
<script src="https://cdn.jsdelivr.net/npm/lozad"></script>
图像元素应如下所示:
<img class="lozad" data-src="image.png">
Javascript
// Initialize library
lozad('.lozad', {
load: function(el) {
el.src = el.dataset.src;
el.onload = function() {
el.classList.add('fade')
}
}
}).observe()
希望对你有帮助。
最好的,
伊多。
关于javascript - 在滚动和 "come into view"上延迟加载图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45916381/