JS图片根据鼠标滚动延时加载的实例代码


Posted in Javascript onJuly 13, 2013

最近研究了京东商城用jQuery的实现如下:
就是默认地址赋给img标签的src2属性,显示时赋给src属性值。

function lazyload(option) {
    var settings = {
defObj: null,
defHeight: 0
    };
    settings = $.extend(settings, option || {});
    var defHeight = settings.defHeight;
    var 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) {
                    //显示后,去掉src2属性
    $(this).attr("src", src2).removeAttr("src2");
}
            }
});
    };
    imgLoad();
    $(window).bind("scroll", function() {
        imgLoad();
    });
}
lazyload({
    defObj:".w1"
});
Javascript 相关文章推荐
Jquery插件写法笔记整理
Sep 06 Javascript
js的匿名函数使用介绍
Dec 11 Javascript
JavaScript编写简单的计算器
Nov 25 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
Dec 10 Javascript
JS中递归函数
Jun 17 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
Nov 18 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
Dec 02 Javascript
JS+canvas动态绘制饼图的方法示例
Sep 12 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
Dec 04 Javascript
vue elementUI tree树形控件获取父节点ID的实例
Sep 12 Javascript
JavaScript提升机制Hoisting详解
Oct 23 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
Sep 04 Javascript
js confirm()方法的使用方法实例
Jul 13 #Javascript
js获取GridView中行数据的两种方法 分享
Jul 13 #Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
Jul 13 #Javascript
浅析ajax请求json数据并用js解析(示例分析)
Jul 13 #Javascript
网页前端优化之滚动延时加载图片示例
Jul 13 #Javascript
JavaScript获取FCK编辑器信息的具体方法
Jul 12 #Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
Jul 12 #Javascript
You might like
PHP魔术方法的使用示例
2015/06/23 PHP
PHP中array_keys和array_unique函数源码的分析
2016/02/26 PHP
PHP读书笔记整理_结构语句详解
2016/07/01 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
laravel 5.3 单用户登录简单实现方法
2019/10/14 PHP
PHP中isset、empty的用法与区别示例详解
2020/11/05 PHP
Extjs学习笔记之七 布局
2010/01/08 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
2014/05/14 Javascript
JS验证逗号隔开可以是中文字母数字
2016/04/22 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
2017/05/13 jQuery
Ionic学习日记实现验证码倒计时
2018/02/08 Javascript
nodejs实现一个word文档解析器思路详解
2018/08/14 NodeJs
用npm安装vue和vue-cli,并使用webpack创建项目的方法
2018/09/28 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
2019/03/19 Javascript
js中apply和call的理解与使用方法
2019/11/27 Javascript
TypeScript 运行时类型检查补充工具
2020/09/28 Javascript
Nuxt的路由动画效果案例
2020/11/06 Javascript
Python在线运行代码助手
2016/07/15 Python
13个最常用的Python深度学习库介绍
2017/10/28 Python
tensorflow实现softma识别MNIST
2018/03/12 Python
Window环境下Scrapy开发环境搭建
2018/11/18 Python
解决pandas .to_excel不覆盖已有sheet的问题
2018/12/10 Python
python爬虫基础教程:requests库(二)代码实例
2019/04/09 Python
pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
2020/01/02 Python
西班牙品牌鞋子、服装和配饰在线商店:Esdemarca
2021/02/17 全球购物
PHP中如何使用Cookie
2015/10/28 面试题
可口可乐广告词
2014/03/20 职场文书
端午节活动总结
2014/08/26 职场文书
计算机科学与技术专业求职信
2014/09/03 职场文书
八项规定整改方案
2014/10/01 职场文书
加入学生会自荐书
2015/03/05 职场文书
使用golang编写一个并发工作队列
2021/05/08 Golang
Python可变集合和不可变集合的构造方法大全
2021/12/06 Python
Android基于Fresco实现圆角和圆形图片
2022/04/01 Java/Android
python中redis包操作数据库的教程
2022/04/19 Python