javascript - 在滚动和 "come into view"上延迟加载图像

Question

我正在使用 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)

Answer 1

有一个名为 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()

希望对你有帮助。
最好的，
伊多。