web-dev-qa-db-ja.com

スクロールで画像を遅延読み込みして「表示される」

怠惰な画像読み込みプラグインとして 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')
    });
}

しかし、検索入力に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で、検索ボックスに1文字入力すると、すべての画像が読み込まれ、最終的には検索している画像が読み込まれます（最後の場合は時間がかかります（30MB sth））。

javascriptjqueryhtmlcsslazy-loading
7
PrimuS

Lozad.jsと呼ばれる優れたライブラリがあります。これは、遅延読み込みのように、より簡単な方法で画像を簡単に読み込むのに役立ちます。

あなたはそれをダウンロードすることができます ここ Githubから。

デモページ ここ 。

説明：
このライブラリは、クラス名で各画像アンカーにスクロールすると、画像を1つずつ読み込みます。

例

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

それがあなたを助けることを願っています。
ベスト、
私がやります。

4
Idoshhh