<!DOCTYPE html>

<html>

<head>

<title>Layzr Demo</title>

<script src="node_modules/layzr.js/dist/layzr.js"></script>

<style>

.row {

margin: 50px 0;

height: 500px;

}

.border {

padding: 10px;

border-style: solid;

border-width: 3px;

border-color: blue;

}

</style>

</head>

<body>

<div class="wrapper">

<div class="row">

<img src="./bg.png" data-layzr="http://blog.fens.me/wp-content/uploads/2015/02/marked.png">

</div>

<div class="row">

<img src="./bg.png" data-layzr="http://blog.fens.me/wp-content/uploads/2015/03/buffer.png">

</div>

<div class="row">

<img src="./bg.png" data-layzr="http://blog.fens.me/wp-content/uploads/2015/02/express4.png">

</div>

<div class="row">

<img src="./bg.png" data-layzr="http://blog.fens.me/wp-content/uploads/2015/03/child_process.png">

</div>

<div class="row">

<img src="./bg.png" data-layzr="http://blog.fens.me/wp-content/uploads/2015/03/crypto.png">

</div>

<div class="row">

<img src="./bg.png" data-layzr="http://blog.fens.me/wp-content/uploads/2014/02/architect.png">

</div>

<div class="row">

<img src="./bg2.png" data-layzr="http://blog.fens.me/wp-content/uploads/2013/08/seo-title.png">

</div>

</div>

<script>

var layzr = new Layzr({

selector: '[data-layzr]',

attr: 'data-layzr',

retinaAttr: 'data-layzr-retina',

threshold: 10,

callback: function () {

console.log(this);

this.classList.add('border');

}

});

</script>

</body>

</html>

　　

图片延迟加载库Layzr的更多相关文章

  1. 简单的Javascript图片延迟加载库Echo.js

    简介: 和 Lazy Load 一样,Echo.js 也是一个用于图像延迟加载 JavaScript.不同的是 Lazy Load 是基于 jQuery 的插件,而 Echo.js 不依赖于 jQue ...

  2. Echo.js – 简单易用的 JavaScript 图片延迟加载插件

    Echo.js 是一个独立的延迟加载图片的 JavaScript 插件.Echo.js 不依赖第三方库,压缩后不到1KB大小. 延迟加载是提高网页首屏显示速度的一种很有效的方法,当图片元素进入窗口可视 ...

  3. 图片延迟加载技术-Lazyload的应用

    我们在浏览图片量非常大的页面时,像淘宝商城商品展示.必应图片搜索这类网站,图片的加载非常流畅,其中就应用了图片延迟加载技术.本文讲解Lazyload图片加载插件,当我们打开页面时,首先在屏幕可视区域加 ...

  4. jquery图片延迟加载 及 serializeArray、serialize用法记录

    1.使用jquery实现 图片延迟加载 由于用户访问页面需要加载很多的图片,延迟加载技术在电子商务网站领域越来越普及,淘宝商城,京东商城,凡客等访问量巨大的电子商务站点为了增加用户用户体验,访问速度以 ...

  5. jQuery图片延迟加载

    这里延迟加载的意思是,拖动滚动条时,在图片出现在浏览器显示区域后才加载显示.在这之前全部图片都由一张图片代替.节省流量,减轻服务器负担. 效果展示 http://hovertree.com/texia ...

  6. js图片延迟加载

    什么是图片延迟加载? 也叫懒加载. 当页面有多屏的时候,页面中的图片比较多. 那么,在页面载入完毕的时候,并不会把所有的图片都加载进来. 而是当用户拖动滚动条的时候,图片要进入用户的视野了,才开始加载 ...

  7. jquery.lazyload 实现图片延迟加载jquery插件

    看到了淘宝产品介绍中,图片是在下拉滚动条时加载,这是一个很不错的用户体验.减少了页面加载的时间了,也减轻了服务器的压力,就查了下用JQuery..   什么是ImageLazyLoad技术 在页面上图 ...

  8. 前端优化之图片延迟加载（lazyload.js）

    要想缩短首屏加载时间,思路一般是减少http请求次数和降低每次的请求量.本文中使用现成的lazyload.js插件,文末会放出下载地址. lazyload.js可以实现图片分批次加载,不是一次性加载完 ...

  9. 第一次自己写jquery图片延迟加载插件，不通用，但修改一下还是可以使用到很多页面上的

    不断修改完善中…… /*! * jquery.lazyoading.js *自定义的页面图片延迟加载插件,比网上的jquery.lazyload简单,也更适合自己的网站 *使用方法: 把img 的cl ...

随机推荐

  1. cocos2d-x中使用sqlite

    在单机游戏中有几十个场景道具,每一个都有各自的状态(获得.未获得.获得个数)等等,如果在游戏中平凡涉及到这些道具的实时存储,那么使用文本就会稍慢.可以使用sqlite数据库来完成. 下载地址:http ...

  2. MSSQL系统表常用操作

    1:获取当前数据库中的所有用户表 select Name from sysobjects where xtype='u' and status>=0 2:获取某一个表的所有字段 select n ...

  3. Android 自学之核心服务

    所谓Android的核心服务主要包括熵服务(Entropy Service).电源管理器(Power Manager).Activity管理器(Activity Manager).通话寄存器(Tele ...

  4. mysql由于外键关联无法删除数据

    在mysql中删除一张表时候,出现 Error No. 1451 Cannot delete or update a parent row: a foreign key constraint fail ...

  5. java调用.net asmx服务

    有时候,在java下开发会调用一下.net下写的服务,看网上有各种方法,但总是不成功,总结下自己测试过能调用成功的方式: 1. 原始方式http-soap public static String p ...

  6. 使用Hibernate框架技术时，对项目进行的配置

    1.在需要使用Hibernate框架技术的项目上单击鼠标右键,在弹出的菜单中选择MyEclipse-->Add Hibernate Capabilities,打开Add Hibernate Ca ...

  7. Redis中文显示为Unicode编码的解决办法

    通过Xshell远程连接Linux中的Redis数据库.... 存入Reids中的value有中文. Xshell得到之后中文并不显示为乱码,显示的是中文对应的Unicode编码: 在Xshell中字 ...

  8. hdu 4635 强连通度缩点

    思路:想用Tarjan算法进行缩点,并记录每个连通分支的点数.缩点完毕过后,找出所有出度或入度为0的连通分量,假设该连通分量的点数为num[i],那么 ans=Max(ans,(n-num-1)*(n ...

  9. poj 3648 2-SAT问题

    思路:将每对夫妻看成是对立状态,每个不正常关系都是一个矛盾,按2-SAT的方式建边.最后建一条新娘到新郎的边.具体看注释 #include<iostream> #include<cs ...

  10. scikit-learn点滴

    scikit-learn点滴 scikit-learn是非常漂亮的一个机器学习库,在某些时候,使用这些库能够大量的节省你的时间,至少,我们用Python,应该是很难写出速度快如斯的代码的. sciki ...