README

一个简单的jQuery插件，用于在滚动时仅在需要时加载元素。

介绍

将属性[data-lazy-src]设置为图片，以便插件知道应加载哪张图片。也可以设置为其他元素，以加载父元素的背景图片。
如果将[data-lazy-url]属性设置为元素，则内容将通过ajax获取。

确保通过插件加载的元素具有最小高度；否则，可能会发生所有元素一次性加载的情况。
例如：

 .lazy-waiting {
    display: block;
    visibility: hidden;
    min-height: 300px;
}

插件为您提供了4个类来处理这种情况。

lazy-waiting这个类接收通过插件初始化的每个元素。
lazy-loading这个类被分配给请求插件加载的每个元素。
lazy-done这个类被设置在每个已加载完成的元素上。

另一个例子：

body.lazy-done {
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

安装

下载插件：未压缩版，压缩版
或者通过composer加载插件

composer require webcito/query-lazy:dev-main

在body标签的末尾包含插件。确保jQuery首先加载。

<script src="./vendor/components/jquery/jquery.min.js"></script>
<script src="./dist/jquery-lazy.min.js"></script>

使用方法

将属性[data-lazy-{src,url}]设置为所有应该懒加载的元素。

<div data-lazy-src="path/to/img.file">
    <img data-lazy-src="path/to/img.file" src="" alt=""/>
    <div data-lazy-url="./demo/content.html"></div>
</div>

初始化插件

$('[data-lazy-src], [data-lazy-url]').lazy(options);

webcito / query-lazy

维护者

详细信息

README

介绍

安装

使用方法

选项

事件

更多信息