在Web应用程序中，系统的瓶颈常在于系统的响应速度。如果系统响应速度过慢，用户就会出现埋怨情绪，

系统的价值也因此会大打折扣。因此，提高系统响应速度，是非常重要的。

从此可知，再好的网站，再炫的网站，只要在网页打开速度方面缓慢，用户都会对这个网站订下一个差评的分数。

往往拉低网站性能都是图片过多或过大方面，所以一般解决这个问题，网站性能都会大大的提高。

而jquery.lazyload.js这款插件可以解决这方面的问题，而且它简单易懂。
以下为它的简单使用代码：
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="jquery-3.1.0.min.js"></script>

    <script src="jquery.lazyload.min.js"></script>

    <style>

    img{

        width:200px;

        height: 200px;

    }

    li .list{

        background-size: contain;

        width: 200px;

        height: 200px;

    }

    ul{

        margin: 0;

        padding: 0;

        list-style: none;

    }

    li{

        margin: 0;

        padding: 0;

    }

    </style>

</head>

<body>

    <ul>

        <li>1<img class="lazy"  data-original="img/1.png" alt=""></li>

        <li>2<img class="lazy"  data-original="img/2.jpg" alt=""></li>

        <li>3<img class="lazy"  data-original="img/3.jpg" alt=""></li>

        <li>4<img class="lazy"  data-original="img/4.jpg" alt=""></li>

        <li>5<img class="lazy"  data-original="img/5.jpg" alt=""></li>

        <li>6<img class="lazy"  data-original="img/6.png" alt=""></li>

        <li>7<div class="list lazy" data-original="img/7.jpg"></div></li>

    </ul>

    <script>

    console.log($("img.lazy").is("img"));

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

    </script>

</body>

</html>

具体使用：传送门

这款插件是依赖于jquery的。

这个插件是可以背景加载的，只要是图片加载，就可以懒加载。

这个插件的编写时使用trigger（）自定义事件的，贯穿整个插件。

核心代码：

$self.one("appear", function() {

                if (!this.loaded) {

                    if (settings.appear) {

                        var elements_left = elements.length;

                        settings.appear.call(self, elements_left, settings);

                    }

                    $("<img />")

                        .one("load", function() {

                            var original = $self.attr("data-" + settings.data_attribute);

                            $self.hide();

                            if ($self.is("img")) {

                                $self.attr("src", original);

                            } else {

                                $self.css("background-image", "url('" + original + "')");

                            }

                            $self[settings.effect](settings.effect_speed);

                            self.loaded = true;

                            /* Remove image from array so it is not looped next time. */

                            var temp = $.grep(elements, function(element) {

                                return !element.loaded;

                            });

                            elements = $(temp);

                            if (settings.load) {

                                var elements_left = elements.length;

                                settings.load.call(self, elements_left, settings);

                            }

                        })

                        .attr("src", $self.attr("data-" + settings.data_attribute));

                }

            });

jquery-懒加载插件的更多相关文章

  1. jQuery懒加载插件jquery.lazyload.js使用说明实例

    jQuery懒加载插件jquery.lazyload.js使用说明实例很多网站都会用到‘图片懒加载’这种方式对网站进行优化,即延迟加载图片或符合某些条件才开始加载图片.懒加载原理:浏览器会自动对页面中 ...

  2. jQuery懒加载插件 – jquery.lazyload.js简单调用

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  3. jQuery懒加载插件 – jquery.lazyload.js

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  4. jQuery懒加载插件

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  5. jquery懒加载插件 jquery_lazyload 下载

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code https://pan.baidu.com/s/1UbOeyL_AaSNN_KMA4M ...

  6. jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  7. jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明

    jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明 jquery.lazyload.js是一个用JavaScript编写的jQuery插件.它可以延迟加载长页面中的图片 ...

  8. 图片懒加载插件lazyload使用方法

    图片懒加载插件lazyload使用方法 一.如何使用: Lazy Load 依赖于 jQuery.引入文件 <script type="text/javascript" sr ...

  9. Vue图片懒加载插件

    图片懒加载是一个很常用的功能,特别是一些电商平台,这对性能优化至关重要.今天就用vue来实现一个图片懒加载的插件. 这篇博客采用"三步走"战略--Vue.use().Vue.dir ...

  10. vue-lazyload懒加载插件的使用

    vue-lazyload懒加载插件的使用其实很简单,不想vue-loader官网用法写的那么简单.下面代码演示: 1.安装插件 npm install vue-lazyload   --save 2. ...

随机推荐

  1. Linux 利用lsof命令恢复删除的文件

    lsof命令 lsof命令用于查看你进程开打的文件,打开文件的进程,进程打开的端口(TCP.UDP).找回/恢复删除的文件.是十分方便的系统监视工具,因为lsof命令需要访问核心内存和各种文件,所以需 ...

  2. Jstack Jmap jstat

    jstack jmap jstat 代码,这里以这个为例怎样使用jstack诊断Java应用程序故障 public class DeadLock { public static void main(S ...

  3. bzoj1412最小割

    太羞耻了,m n写反了(主要是样例n m相等) 建图方法比较高(ji)端(chu),对于可以加栅栏的地方连上1的边,然后求最小割即可 为了让代码优(suo)美(duan),我写了一个check,避免多 ...

  4. IOS UIWebView 下拉刷新功能的简单实现

    1.运行效果图 2.swift 代码的实现 import UIKit class RefreshWebViewController: UIViewController,UIScrollViewDele ...

  5. mysql主从复制配置

    使用mysql主从复制的好处有: 1.采用主从服务器这种架构,稳定性得以提升.如果主服务器发生故障,我们可以使用从服务器来提供服务. 2.在主从服务器上分开处理用户的请求,可以提升数据处理效率. 3. ...

  6. CentOS利用postfix搭建邮件服务器

    之前我用nodemailer通过163邮箱来发送邮件,不过没过几天就一直ETIMEDOUT,不知道什么原因,想着还是自己搭一个来发邮件可能靠谱点(flag?) 安装postfix CentOS 7 自 ...

  7. 前端工具之-- Sublime

    开始学习前端知识,做一些笔记来记录下- 之前学习都是使用的dw 现在前端开发工具既轻便功能也够强大. 下面记录下常用的前端工具: Sublime3:需要安装第三方包,一般 Atom:继承度非常好 VS ...

  8. Codeforces Round #361 (Div. 2) B

    B - Mike and Shortcuts Description Recently, Mike was very busy with studying for exams and contests ...

  9. css单位：em，rem解释

    em:所有浏览器都符合:1em=16px;1.具有继承性2.em的根元素是body,当设置了根元素的大小时,大小是定义的数字乘以根元素定义的大小值 rem:1rem=16pxrem不具有继承性,其根元 ...

  10. CSS样式，雪碧，图片替换，渐变小析

    Css基础2: 相对长度单位:em,rem,px,%绝对长度单位:厘米等(不用)颜色单位:rgb,rgb的百分比,16进制(#),颜色名称字体:font-size:为了更好适合点阵,尽量使用偶数fon ...