图片延迟加载库Layzr
<!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的更多相关文章
- 简单的Javascript图片延迟加载库Echo.js
简介: 和 Lazy Load 一样,Echo.js 也是一个用于图像延迟加载 JavaScript.不同的是 Lazy Load 是基于 jQuery 的插件,而 Echo.js 不依赖于 jQue ...
- Echo.js – 简单易用的 JavaScript 图片延迟加载插件
Echo.js 是一个独立的延迟加载图片的 JavaScript 插件.Echo.js 不依赖第三方库,压缩后不到1KB大小. 延迟加载是提高网页首屏显示速度的一种很有效的方法,当图片元素进入窗口可视 ...
- 图片延迟加载技术-Lazyload的应用
我们在浏览图片量非常大的页面时,像淘宝商城商品展示.必应图片搜索这类网站,图片的加载非常流畅,其中就应用了图片延迟加载技术.本文讲解Lazyload图片加载插件,当我们打开页面时,首先在屏幕可视区域加 ...
- jquery图片延迟加载 及 serializeArray、serialize用法记录
1.使用jquery实现 图片延迟加载 由于用户访问页面需要加载很多的图片,延迟加载技术在电子商务网站领域越来越普及,淘宝商城,京东商城,凡客等访问量巨大的电子商务站点为了增加用户用户体验,访问速度以 ...
- jQuery图片延迟加载
这里延迟加载的意思是,拖动滚动条时,在图片出现在浏览器显示区域后才加载显示.在这之前全部图片都由一张图片代替.节省流量,减轻服务器负担. 效果展示 http://hovertree.com/texia ...
- js图片延迟加载
什么是图片延迟加载? 也叫懒加载. 当页面有多屏的时候,页面中的图片比较多. 那么,在页面载入完毕的时候,并不会把所有的图片都加载进来. 而是当用户拖动滚动条的时候,图片要进入用户的视野了,才开始加载 ...
- jquery.lazyload 实现图片延迟加载jquery插件
看到了淘宝产品介绍中,图片是在下拉滚动条时加载,这是一个很不错的用户体验.减少了页面加载的时间了,也减轻了服务器的压力,就查了下用JQuery.. 什么是ImageLazyLoad技术 在页面上图 ...
- 前端优化之图片延迟加载（lazyload.js）
要想缩短首屏加载时间,思路一般是减少http请求次数和降低每次的请求量.本文中使用现成的lazyload.js插件,文末会放出下载地址. lazyload.js可以实现图片分批次加载,不是一次性加载完 ...
- 第一次自己写jquery图片延迟加载插件，不通用，但修改一下还是可以使用到很多页面上的
不断修改完善中…… /*! * jquery.lazyoading.js *自定义的页面图片延迟加载插件,比网上的jquery.lazyload简单,也更适合自己的网站 *使用方法: 把img 的cl ...
随机推荐
- debian root用户在shell下如何能够使用颜色
转载:http://hi.baidu.com/aivera/item/f31c4a590ef72609e6c4a596 编辑 /root/.bashrc 这个文件, 把里面这几行前面的#号去掉就可以了 ...
- CF A and B and Compilation Errors (排序)
A and B and Compilation Errors time limit per test 2 seconds memory limit per test 256 megabytes inp ...
- Linux 文件/文件夹操作命令
1 cd命令 命令格式:cd [目录名] (cd和目录之间使用空格隔开) cd 进入用户主目录: cd ~ 进入用户主目录: cd - 返回进入此目录之前所在的目录: cd ...
- js学习笔记—转载（闭包问题）
---恢复内容开始--- 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 一.变量的作用域 要理解闭包,首先必须理解Javascrip ...
- Networking - ARP 协议
ARP 协议概述 ARP(Address Resolution Protocol),即地址解析协议,用于把 IP 地址映射到物理地址.网段上的每台主机都维护着一个被称为 ARP Table 或 ARP ...
- IntelliJ IDEA 13.x 下使用Hibernate + Spring MVC + JBoss 7.1.1
从2004年开始做.NET到现在.直到最近要做一些JAVA的项目,如果说100个人写一篇关于.NET的文章,估计这10个人写的内容都是一样.但是如果说10个人写Java的文章,那真的是10个人10种写 ...
- SSRS 传多值参数问题
SSRS报表参数是可单值或者多值.之前有个小伙伴问我,如果要传多值怎么传.然后我试了在各个参数之间,放换行符放逗号分号等都未能解决问题,最后想明白这个参数接受的应该是非字符类型,很大可能是数组,然后我 ...
- Agile.Net 组件式开发平台 - 内核管理组件
敏捷开发体系 软件构件技术:所谓软件构件化,就是要让软件开发像机械制造工业一样,可以用各种标准和非标准的零件来进行组装.软件的构件化和集成技术的目标是:软件系统可以由不同厂商提供的,用不同语言开发 ...
- C# 使用Code First迁移更新数据库
三步完成迁移: 1. 启用迁移: Enable-Migrations Enable-Migrations -ContextTypeName Mvc4WebSite.Models.MvcGuestboo ...
- 一个简单的Redis结合Spring MVC架构以及实现过程
为了加快开发人员对公司项目的理解.更加容易入手和对公司项目的整体把控. 整体框架 首先介绍公司项目的整体框架,闲话少说,直接上图 整体性能分析 这就是公司的一个整体的架构,为了开发人员对架构的侧重点的 ...