jQuery图片延迟加载插件--lazyload，使用 lazyload插件 可以提高网页的打开速度。同时，也能帮助减轻服务器的负载。




使用方法：
1. 引入文件（注意：先引入jq，后引入lazyload！）
例如：

[JavaScript] 纯文本查看 复制代码

 [/color]
[color=#000000]<script src='./js/jquery-1.11.0.min.js'></script>
    <script src='./js/jquery.lazyload.js'></script>[/color]
[color=#000000]

2. 在html的img中添加 class="lazy" ，
   原本要写在img标签src的图片地址，写到 data-original="图片地址" 中
例如：

[JavaScript] 纯文本查看 复制代码

 
<img class="lazy" data-original="images/1.jpg">
    <img class="lazy" data-original="images/2.jpg">
    <img class="lazy" data-original="images/3.jpg">
    <img class="lazy" data-original="images/4.jpg">
    <img class="lazy" data-original="images/5.jpg">
    <img class="lazy" data-original="images/6.jpg">
    <img class="lazy" data-original="images/7.jpg">
    <img class="lazy" data-original="images/8.jpg">

3. 在script里初始化

[JavaScript] 纯文本查看 复制代码

<script> 
        $("img.lazy").lazyload({
            effect: "fadeIn"
        });
    </script>

demo案例代码见附件

最新干货精彩资源点击查看

jQuery图片延迟加载插件--lazyload，使用 lazyload插件 可以提高网页的打开速度。同时，也能帮助减轻服务器的负载。




使用方法：
1. 引入文件（注意：先引入jq，后引入lazyload！）
例如：

[JavaScript] 纯文本查看 复制代码

 [/color]
[color=#000000]<script src='./js/jquery-1.11.0.min.js'></script>
    <script src='./js/jquery.lazyload.js'></script>[/color]
[color=#000000]

2. 在html的img中添加 class="lazy" ，
   原本要写在img标签src的图片地址，写到 data-original="图片地址" 中
例如：

[JavaScript] 纯文本查看 复制代码

 
<img class="lazy" data-original="images/1.jpg">
    <img class="lazy" data-original="images/2.jpg">
    <img class="lazy" data-original="images/3.jpg">
    <img class="lazy" data-original="images/4.jpg">
    <img class="lazy" data-original="images/5.jpg">
    <img class="lazy" data-original="images/6.jpg">
    <img class="lazy" data-original="images/7.jpg">
    <img class="lazy" data-original="images/8.jpg">

3. 在script里初始化

[JavaScript] 纯文本查看 复制代码

<script> 
        $("img.lazy").lazyload({
            effect: "fadeIn"
        });
    </script>

demo案例代码见附件

最新干货精彩资源点击查看