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 ...
随机推荐
- STM32外部中断.
void EXTIX_Init(void){ EXTI_InitTypeDef EXTI_InitStructure; NVIC_InitTypeDef NVIC_InitStructu ...
- sql server 2012 自定义聚合函数(MAX_O3_8HOUR_ND) 计算最大的臭氧8小时滑动平均值
采用c#开发dll,并添加到sql server 中. 具体代码,可以用visual studio的向导生成模板. using System; using System.Collections; us ...
- http 报文 - 转
1. http 报文 2. HTTP报文
- Window下memcached安装与测试步骤
如何在Window下memcached安装与测试步骤 工具/原料 电脑 memcached 软件 方法/步骤 软件包下载 下载Memercached For Windows:http://downlo ...
- hdwiki 在IIS 下的伪静态
HDwiki有SEO设置的功能,此功能可以将HDwiki的页面进行URL静态化转换,从而使HDwiki内容更容易被搜索引擎挖掘,提高被收录的机率.注意事项 1.本功能对服务器环境有特殊要 ...
- android使用其他应用打开文件
根据文件的MIME类型来判断,手机中有哪些应用可以打开这个文件,然后把应用在弹窗列表中显示 /** * 打开文件 * * @param file */ public static void openF ...
- 【转】Eclipse插件大全介绍及下载地址
转载地址:http://developer.51cto.com/art/200906/127169.htm 尚未一一验证. eclipse插件大全介绍,以及下载地址 Eclipse及其插件下载网址大全 ...
- javaWEB国际化（jsp中使用）
在jsp页面中使用国际化方法,首先将jstl开源架包:jstl.jar,standard.jar导进去 并在src目录下建立以test开头,.properties结尾的文件:test_en_US.pr ...
- Session机制（是对cookie的作用的提升，使用较多）
1.Session作用类似于购物车,第一次,放入物品,可以获得Session的id,并可以设置id失效的时间,这样便于多次将物品放在购物车里面,使用的就是获取的Session的id: 2.Sessio ...
- 安装python-devel 在升级到python2.7之后
分别执行如下命令: # yum update # yum install centos-release-SCL # yum search all python27 在搜索出的列表中发现python27 ...