lazyload懒加载的使用
1.引用<script src="http://a.tbcdn.cn/apps/baron/js/??lib/tmm/tmm.js,lib/lazyload/lazyload.js?20121015"></script>
2.对于要懒加载的图片进行如下属性设置。<img src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif" dataimg="http://img03.taobaocdn.com/tps/i3/T1xl4_FlFaXXcLmU_5-305-317.png" />
其中src为未加载时的图片，dataimg为实际要加载的图片。
3.执行lazyload.init();
4.分tab的懒加载。判断tab把下面的图片有没加载过。根据loaded属性判断，还要对非当前tab所属的图片进行class lazy去掉。对已加载的loaded为true的图片，不加lazy属性
5.注意lazyload.init()的执行时机，如果在dom ready阶段执行，会下载所有图片，不能实现懒加载。要在winow.onload完成这个阶段去执行。
lazyload.js代码解读：
/**
* 基于jQuery或者zeptoJS的惰性加载
*/
var lazyload = {
init : function(opt){
var that = this;
var op = {
anim: true,
extend_height:400
};
// 合并对象，已有的{anim:true}+用户自定义对象。也就是op = op + opt
$.extend(op,opt);
// 调用lazyload.img.init(op)函数
that.img.init(op); }, img : {
init : function(n){ var that = this;
console.log(n); // 要加载的图片是不是在指定窗口内
function inViewport( el ) {
// 当前窗口的顶部
var top = window.pageYOffset
// 当前窗口的底部
var btm = window.pageYOffset + window.innerHeight
// 元素所在整体页面内的y轴位置
var elTop = $(el).offset().top;
// 判断元素，是否在当前窗口，或者当前窗口延伸400像素内
return elTop >= top && elTop - n.extend_height <= btm
} // 滚动事件里判断，加载图片
$(window).bind('scroll', function() {
$('img.lazy').each(function(index,node) {
var $this = $(this)
if(!$this.attr('dataimg')){
return
}
if ( !inViewport(this) ) return
act($this) })
}).trigger('scroll') // 展示图片
function act(_self){
// 已经加载过了，则中断后续代码
if (_self.attr('loaded')) return;
var img = new Image(), original = _self.attr('dataimg')
// 图片请求完成后的事件，把dataimg指定的图片，放到src里面，浏览器显示
img.onload = function() {
_self.attr('src', original).removeClass('lazy');
n.anim && _self.css({ opacity: .2 }).animate({ opacity: 1 }, 280);
}
// 当你设置img.src的时候，浏览器就在发送图片请求了
original && (img.src = original);
_self.attr('loaded', true);
}
}
}
};
2015年6月30日添加用例
<!doctype html>
<html lang="en"> <head>
<meta charset="UTF-8" />
<title>懒加载实例</title>
<style type="text/css">
/*一定要有预先高度*/
img{
width: 600px;
height: 260px;
}
</style>
</head> <body>
<div>
<img class="samLazyImg" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif" dataimg="http://yangege.b0.upaiyun.com/11de79502d0af.jpg!v1sell" alt="" />
</div>
<div>
<img class="samLazyImg" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif" dataimg="http://yangege.b0.upaiyun.com/33f99f823ed3d.jpg!v1sell" alt="" />
</div>
<div>
<img class="samLazyImg" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif" dataimg="http://yangege.b0.upaiyun.com/680120973b82.jpg!v1sell" alt="" />
</div>
<div>
<img class="samLazyImg" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif" dataimg="http://yangege.b0.upaiyun.com/67f87ba08cf0.jpg!v1sell" />
</div>
<div>
<img class="samLazyImg" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif" dataimg="http://yangege.b0.upaiyun.com/22ec075a17c33.jpg!v1sell" alt="" />
</div>
<div>
<img class="samLazyImg" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif" dataimg="http://yangege.b0.upaiyun.com/2e4a699680788.jpg!v1sell" alt="" />
</div>
<div>
<img class="samLazyImg" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif" dataimg="http://yangege.b0.upaiyun.com/c2f4043a4991.jpg!v1sell" alt="" />
</div>
<div>
<img class="samLazyImg" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif" dataimg="http://yangege.b0.upaiyun.com/33f996b4386ab.jpg!v1sell" alt="" />
</div>
</body>
<script src="jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var lazyload = {
init : function(opt){
var that = this,
op = {
anim: true,
extend_height:0,
selectorName:"img",
realSrcAtr:"dataimg"
};
// 合并对象，已有的{anim:true}+用户自定义对象。也就是op = op + opt
$.extend(op,opt);
// 调用lazyload.img.init(op)函数
that.img.init(op); }, img : {
init : function(n){ var that = this,
selectorName = n.selectorName,
realSrcAtr = n.realSrcAtr,
anim = n.anim;
// console.log(n); // 要加载的图片是不是在指定窗口内
function inViewport( el ) {
// 当前窗口的顶部
var top = window.pageYOffset,
// 当前窗口的底部
btm = window.pageYOffset + window.innerHeight,
// 元素所在整体页面内的y轴位置
elTop = $(el).offset().top;
// 判断元素，是否在当前窗口，或者当前窗口延伸400像素内
return elTop >= top && elTop - n.extend_height <= btm;
} // 滚动事件里判断，加载图片
$(window).on('scroll', function() {
$(selectorName).each(function(index,node) {
var $this = $(this); if(!$this.attr(realSrcAtr) || !inViewport(this)){
return;
} act($this); })
}).trigger('scroll'); // 展示图片
function act(_self){
// 已经加载过了，则中断后续代码
if (_self.attr('lazyImgLoaded')) return;
var img = new Image(),
original = _self.attr('dataimg');
// 图片请求完成后的事件，把dataimg指定的图片，放到src里面，浏览器显示
img.onload = function() {
_self.attr('src', original);
anim && _self.css({ opacity: .2 }).animate({ opacity: 1 }, 280);
};
// 当你设置img.src的时候，浏览器就在发送图片请求了
original && (img.src = original);
_self.attr('lazyImgLoaded', true);
}
}
}
}; /*
* selectorName，要懒加载的选择器名称
* extend_height 扩展高度
* anim 是否开启动画
* realSrcAtr 图片真正地址*/
lazyload.init({
anim:false,
selectorName:".samLazyImg"
});
</script> </html>
lazyload懒加载的使用的更多相关文章
- 在ThinkPHP框架（5.0.24）下引入Ueditor并实现向七牛云对象存储上传图片同时将图片信息保存到MySQL数据库，同时实现lazyload懒加载
这是我花了很多天的时间才得以真正实现的一组需求. 文章后面有完整Demo的GitHub链接. 一. 需求描述 1. 应用是基于ThinkPHP5开发的: 2. 服务器环境是LNMP,PHP版本是7.2 ...
- jQuery lazyload 懒加载
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- react 使用 lazyload 懒加载图片
文档地址 index.html <script> (function(w, d) { var b = d.getElementsByTagName("body")[0] ...
- 如何在小程序实现图片lazy-load懒加载效果
自从跳一跳出现之后小程序又开始频繁出现了,在学习过程中发现小程序虽然好但是由于api不完善导致开发过程中有很多的坑,重点是网上相对小程序出现坑时解决方案显然比较少,小程序最让人觉得痛心疾首之一就是无法 ...
- [easyUI] lazyload 懒加载
1.使用<img>标签将图片都写在网页上. <div style="height:450px;"><h1>请往下看,有图片的吆!</h1& ...
- lazyload懒加载插件
在main.js中引入vue-lazyload插件 并使用 注册插件: import VueLazyLoad from 'vue-lazyload' Vue.use(VueLazyLoad,{ lo ...
- lazyload懒加载和swiper轮播懒加载的用法
对于有较多的图片的网页,使用图片延迟加载,能有效的提高页面加载速度,比如商城网页. lazyload使用方法: 载入 JavaScript 文件: <script src="jquer ...
- 前端性能优化成神之路--图片懒加载(lazyload image)
图片懒加载(当然不仅限于图片,还可以有视频,flash)也是一种优化前端性能的方式.使用懒加载可以想要看图片时才加载图片,而不是一次性加载所有的图片,从而在一定程度从减少服务端的请求 什么是懒加载 懒 ...
- Android--Fragment的懒加载
我们都知道,fragment放在viewPager里面,viewpager会帮我们预先加载一个,但是当我们要看fragment里面的内容时,我们也许只会去看第一个,不会去看第二个,如果这时候不去实现f ...
随机推荐
- React笔记_(4)_react语法3
生命周期 很多语言中都讲了关于生命周期.这可是决定生命的周始,有没有存在感的关键啊. 生命周期,有生有死,有始有终,因果轮回,循环往复.(说多了) react中,主要说明的是 一个组件的生命周期.简单 ...
- linux,Mac下lu 一把
习惯Terminal没有不知道ls命令的(等同于DOS的dir),经常只是需要查看目录的内容大小,但ls -h显示的只是目录的本身大小,而且很多项内容 ls 在这方面的两个诟病出现了: 小诟1. 显示 ...
- linux进程的堆栈空间_代码段（指令，只读）、数据段(静态变量，全局变量)、堆栈段(局部变量)、栈【转】
转自:http://blog.csdn.net/gongweijiao/article/details/8207333 原文参见:http://blog.163.com/xychenbaihu@yea ...
- 2016年最好的15个Web设计和开发工具
1.ai2html ai2html是适用于Adobe Illustrator的开源脚本,可以转换Illustrator文件为html和css. 官方网站:http://ai2html.org/ 2.A ...
- [转]ConsumeContainerWhitespace property to remove blank space in SSRS 2008 report
转自:http://beyondrelational.com/modules/2/blogs/115/posts/11153/consumecontainerwhitespace-property-t ...
- Nagios监控Oralce
一.本文说明: 本文是监控本地的Oracle,其实监控远端的Oracle也是跟下面的步骤差不多的. 二.安装Nagios.Nagios插件.NRPE软件: 安装步骤可以参考<Linux下Nagi ...
- CI 配置验证规则
//判断表单域,提交表单显示对应的错误信息 $this->load->library('form_validation'); $config = array( ...
- mybatis+springMVC新感悟
一直以为按照例子里写的.先编写User实体类,之后在编写User.xml之后在配置文件里指明接口文件.然后在controller中就可以通过就可以通过定义接口,在取值 IUserOperation u ...
- ThreadLocal的使用及介绍
ThreadLocal总结 1.ThreadLocal使用场合主要解决多线程中数据数据因并发产生不一致问题.ThreadLocal为每个线程的中并发访问的数据提供一个副本,通过访问副本来运行业务,这样 ...
- nodejs 与数据库的连接
//创建连接(封装) var mysql = require("mysql") function name(){ var con = mysql.createConnection( ...