基于jquery的图片懒加载js


Posted in Javascript onJune 30, 2010

以下是实现代码(基于jquery):

function lazyload(option){ 
var settings={ 
defObj:null, 
defHeight:0 
}; 
settings=$.extend(settings,option||{}); 
var defHeight=settings.defHeight,defObj=(typeof settings.defObj=="object")?settings.defObj.find("img"):$(settings.defObj).find("img"); 
var pageTop=function(){ 
return document.documentElement.clientHeight+Math.max(document.documentElement.scrollTop,document.body.scrollTop)-settings.defHeight; 
}; 
var imgLoad=function(){ 
defObj.each(function(){ 
if ($(this).offset().top<=pageTop()){ 
var src2=$(this).attr("src2"); 
if (src2){ 
$(this).attr("src",src2).removeAttr("src2"); 
} 
} 
}); 
}; 
imgLoad(); // 绑定滚动事件 
$(window).bind("scroll",function(){ 
imgLoad(); 
}); 
} 
lazyload({ 
defObj:"#plist" 
})
Javascript 相关文章推荐
firefox中JS读取XML文件
Dec 21 Javascript
jQuery 源代码显示控件 (Ajax加载方式).
May 18 Javascript
JQuery index()方法使用代码
Jun 02 Javascript
jquery延迟加载外部js实现代码
Jan 11 Javascript
javascript获取ckeditor编辑器的值(实现代码)
Nov 18 Javascript
javascript设计模式--策略模式之输入验证
Nov 27 Javascript
无缝滚动的简单实现代码(推荐)
Jun 07 Javascript
AngularJS 路由详解和简单实例
Jul 28 Javascript
Ajax的概述与实现过程
Nov 18 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
Mar 08 Javascript
Vue中的Props(不可变状态)
Sep 29 Javascript
vue实现导航菜单和编辑文本的示例代码
Jul 04 Javascript
CSS和Javascript简单复习资料
Jun 29 #Javascript
javascript与CSS复习(三)
Jun 29 #Javascript
javascript与CSS复习(二)
Jun 29 #Javascript
javascript与CSS复习(《精通javascript》)
Jun 29 #Javascript
通过javascript的匿名函数来分析几段简单有趣的代码
Jun 29 #Javascript
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
Jun 29 #Javascript
Whatever:hover 无需javascript让IE支持丰富伪类
Jun 29 #Javascript
You might like
PHP操作MongoDB时的整数问题及对策说明
2011/05/02 PHP
PHP 杂谈《重构-改善既有代码的设计》之五 简化函数调用
2012/05/07 PHP
浅谈php函数serialize()与unserialize()的使用方法
2014/08/19 PHP
PHP实现基于回溯法求解迷宫问题的方法详解
2017/08/17 PHP
PHP unset函数原理及使用方法解析
2020/08/14 PHP
IE6下CSS图片缓存问题解决方法
2010/12/09 Javascript
Jquery chosen动态设置值实例介绍
2013/08/08 Javascript
php跨域调用json的例子
2013/11/13 Javascript
javascript中解析四则运算表达式的算法和示例
2014/08/11 Javascript
Jquery日期选择datepicker插件用法实例分析
2015/06/08 Javascript
JavaScript的this关键字的理解
2016/06/18 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
2016/08/24 Javascript
jQuery实现简单的滑动导航代码(移动端)
2017/05/22 jQuery
Angular.JS中指令ng-if的注意事项小结
2017/06/21 Javascript
js原生代码实现轮播图的实例讲解
2017/07/28 Javascript
vue 1.x 交互实现仿百度下拉列表示例
2017/10/21 Javascript
webpack打包nodejs项目的方法
2018/09/26 NodeJs
js字符串处理之绝妙的代码
2019/04/05 Javascript
jquery绑定事件 bind和on的用法与区别分析
2020/05/22 jQuery
[03:31]DOTA2英雄基础教程 大地之灵
2013/12/17 DOTA
[01:17]辉夜杯战队访谈宣传片—EHOME
2015/12/25 DOTA
python 性能优化方法小结
2017/03/31 Python
Python设计模式之状态模式原理与用法详解
2019/01/15 Python
python实现维吉尼亚算法
2019/03/20 Python
运用PyTorch动手搭建一个共享单车预测器
2019/08/06 Python
Python IDE环境之 新版Pycharm安装详细教程
2020/03/05 Python
matplotlib绘制鼠标的十字光标的实现(自定义方式,官方实例)
2021/01/10 Python
Pytorch 图像变换函数集合小结
2021/02/01 Python
阿迪达斯西班牙官方网站:adidas西班牙
2016/07/21 全球购物
Omio葡萄牙:全欧洲低价大巴、火车和航班搜索和比价
2019/02/09 全球购物
学生出入校管理制度
2014/01/16 职场文书
2015年计划生育协会工作总结
2015/05/13 职场文书
中学音乐课教学反思
2016/02/18 职场文书
Django 如何实现文件上传下载
2021/04/08 Python
Mysql分析设计表主键为何不用uuid
2022/03/31 MySQL
vue实现input输入模糊查询的三种方式
2022/08/14 Vue.js