jQuery-滚动加载图像不起作用

时间:2019-06-25 13:22:54

标签: jquery lazy-loading

我有一个小问题,我不明白为什么。我搜索了很多lib来实现延迟加载(滚动加载图像),但是经过多次尝试,我什么都没成功。

仅需注意,我的所有图像都是这样动态生成的:

{% for pdf in pdf_group %}
    <div class="col-sm-3">
        <div class="card">
            <a href="{{ url_for('list.view', id=pdf['rowid']) }}">
                <img class="card-img-top lazy"
                     data-src="{{ url_for('static', filename="files/thumbs/" + pdf['thumbFilename']) }}"
                     alt="Thumbnail">
            </a>
            <div class="card-body">
                <h5 class="card-title">
                    <a href="{{ url_for('list.view', id=pdf['rowid']) }}">
                        {{ pdf['filename'] }}
                    </a>
                    <span class="badge badge-secondary badge-pill">{{ pdf['nbPages'] }}</span>
                </h5>
                <p class="card-text"></p>
                <p class="card-text"><small class="text-muted">Enregistré le : </small></p>
            </div>
        </div>
    </div>
{% endfor %}

以下是使用延迟加载库的示例:https://codepen.io/anon/pen/qzrqEx 如您所见,所有图像都同时加载,即使用户看不到也是如此

预先感谢

0 个答案:

没有答案