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 ...
随机推荐
- Unicode : RLO
分类:备忘,Unicode,Perl 我们一般的输入文字的方向是从左往右,但是世界上总有特例,阿拉伯国家是从右到左的书写方式.经常看到微信里面好友得瑟,也就拿过来总结一下. 每个语言都能实现字符串反转 ...
- Linux环境变量的修改（永久，暂时）以及修改ls显示的时间格式
本文转自:http://blog.sina.com.cn/s/blog_8e21864f01014u9h.html Linux修改环境变量,很简单但很重要 一.Linux的变量种类 按变量的生存周期来 ...
- NSAssert用法
今天突然发现了一个开发ios程序时调试的好帮手-NSAssert()函数.而且和NSLog()函数一样简单易用,代码如下: NSAssert(x!=0,@"x must not be zer ...
- Codeforces Gym 101142C：CodeCoder vs TopForces（搜索）
http://codeforces.com/gym/101142/attachments 题意:每个人在TC和CF上分别有两个排名,如果有一个人在任意一个网站上大于另一个人的排名,那么这个人可以打败另 ...
- jquery.rotate.js库中的rotate函数怎么用。
rotate是jQuery旋转rotate插件,支持Internet Explorer 6.0+ .Firefox 2.0 .Safari 3 .Opera 9 .Google Chrome,高级浏览 ...
- 让popUpWindow之外的区域显示阴影效果
/** * 让popupwindow以外区域阴影显示 * @param popupWindow */ private void popOutShadow(PopupWindow popupWindow ...
- AngularJS 用 Interceptors 来统一处理 HTTP 请求和响应
Web 开发中,除了数据操作之外,最频繁的就是发起和处理各种 HTTP 请求了,加上 HTTP 请求又是异步的,如果在每个请求中来单独捕获各种常规错误,处理各类自定义错误,那将会有大量的功能类似的代码 ...
- meta标签部分总结
<meta>标签用于提供页面的元信息,比如针对搜索引擎和更新频度的描述和关键词.由于看到很多网页<head>里面<meta>标签的内容很多,对这些标签含义了解不太清 ...
- SQL Server 索引和表体系结构（二）
转自:http://www.cnblogs.com/chenmh 非聚集索引 概述 对于非聚集索引,涉及的信息要比聚集索引更多一些,由于整个篇幅比较大涉及接下来的要写的“包含列的索引”,“索引碎片”等 ...
- easyui datebox 只选择年月
//将日期输入框变为年月的函数方法 var month=0; $('#effectiveDate').datebox({ onShowPanel: function () ...