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')
    });
}

但是现在我有一个＆＃34;过滤器＆＃34;当我在搜索输入中输入sth时，它们的属性为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 ......）

Answer 1

有一个名为Lozad.js的优秀图书馆可以帮助您更轻松地加载图像，例如延迟加载，但更容易。

您可以从Github下载here。

演示页面here。

<强>解释
该库将按类名滚动到每个图像锚点，逐个加载图像。

示例

HTML：
在标题 - ＆gt;

<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()

希望它会对你有所帮助。
最好，
IDO。

懒惰加载图像滚动和＆＃34;进入视图＆＃34;

1 个答案: