修改jquery.lazyload.js实现页面延迟载入

下面是详细的攻略：

什么是jquery.lazyload.js

jquery.lazyload.js是一个jQuery插件，其作用是让网页的图片等资源在滚动到可视区域时再加载，可以有效地减少页面加载时间，提高用户体验。

实现页面延迟载入的步骤

1. 引入jquery.lazyload.js文件

首先，在HTML文件中引入jquery.lazyload.js文件。可以通过CDN或者下载到本地后引入。以下是通过CDN引入的代码。

<script src="https://cdn.bootcdn.net/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.js"></script>

1. 增加data-original属性

在img标签添加data-original属性，该属性存储图片实际的链接地址。同时，为了在没有加载出图片时显示加载图片，我们需要给img标签设置一个占位图片，可以把我们预设的图片路径给img标签的“src”属性。

<img data-original="image1.jpg" src="loading.gif" alt="图片">

1. 初始化方法

在JavaScript代码中初始化lazyload方法。

$(function() {
    $("img.lazy").lazyload();
});

其中，“img.lazy”是我们要延迟加载的img标签的选择器。

1. 修改jquery.lazyload.js文件

如果我们需要对延迟载入的页面逻辑进行定制，我们还可以修改jquery.lazyload.js文件。下面是一些可能会被修改的参数和函数：

1. effect

effect是表示图片显示时的效果，其默认值为"show"，即直接显示图片。我们可以通过修改effect参数来实现图片渐隐渐现等效果。

$("img.lazy").lazyload({
    effect: "fadeIn"
});

以上代码会实现图片渐显效果。

2. threshold

threshold是表示当可视区域与图片距离达到多少像素时开始加载图片，其默认值为0。我们可以通过修改threshold来决定图片的加载时机。

$("img.lazy").lazyload({
    threshold: 200
});

以上代码表示当图片到可视区域的距离为200px时开始加载。

3. event

event是表示触发图片加载的事件，其默认值为"scroll"，即滚动到可视区域时加载。我们也可以修改event来实现鼠标悬停、点击等方式触发图片加载。

$("img.lazy").lazyload({
    event: "mouseover"
});

以上代码表示当鼠标悬停在图片上时开始加载图片。

示例说明

下面是两个实例说明：

示例1：修改threshold参数

在页面中，有一个class为“lazy”的img标签，我们需要把图片的加载延迟到滚动到可视区域时再进行加载，并且要让图片距离可视区域有300px时才开始进行加载。代码如下：

<img class="lazy" data-original="image.jpg" src="loading.gif" alt="图片">

$(function() {
    $("img.lazy").lazyload({
        threshold: 300
    });
});

示例2：修改effect参数

在页面中，有一个class为“lazy”的img标签，我们需要在图片显示时实现渐显效果。代码如下：

<img class="lazy" data-original="image.jpg" src="loading.gif" alt="图片">

$(function() {
    $("img.lazy").lazyload({
        effect: "fadeIn"
    });
});

以上两个实例说明了如何通过修改jquery.lazyload.js插件的参数来实现我们需要的图片延迟加载效果。