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多选下拉列表插件jquery multiselect功能介绍及使用
May 24 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
Jul 18 Javascript
jQuery中:disabled选择器用法实例
Jan 04 Javascript
JQuery实现Ajax加载图片的方法
Dec 24 Javascript
JS实现动态生成表格并提交表格数据向后端
Nov 25 Javascript
jQuery实现的导航动画效果(附demo源码)
Apr 01 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
基于EasyUI的基础之上实现树形功能菜单
Jun 28 Javascript
自制简易打赏功能的实例
Sep 02 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
Jan 18 Javascript
前端性能优化建议
Sep 17 Javascript
前端JS获取URL参数的4种方法总结
Apr 05 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语言构造器介绍
2013/07/08 PHP
php实现的获取网站备案信息查询代码(360)
2013/09/23 PHP
php实现转换ubb代码的方法
2015/06/18 PHP
PHP实现递归复制整个文件夹的类实例
2015/08/03 PHP
CMSPRESS 10行代码搞定 PHP无限级分类2
2018/03/30 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
js之WEB开发调试利器:Firebug 下载
2007/01/13 Javascript
JavaScript中的标签语句用法分析
2015/02/10 Javascript
jquery中EasyUI使用技巧小结
2015/02/10 Javascript
文字垂直滚动之javascript代码
2015/07/29 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
2015/09/06 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
2015/10/28 Javascript
前端框架Vue.js构建大型应用浅析
2016/09/12 Javascript
解析AngularJS中get请求URL出现的跨域问题
2016/12/01 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
2018/03/12 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
2018/04/27 Javascript
Django的session中对于用户验证的支持
2015/07/23 Python
使用Python编写一个最基础的代码解释器的要点解析
2016/07/12 Python
python实现简单多人聊天室
2018/12/11 Python
Python实现查找字符串数组最长公共前缀示例
2019/03/27 Python
python查看文件大小和文件夹内容的方法
2019/07/08 Python
Flask框架钩子函数功能与用法分析
2019/08/02 Python
浅谈Python程序的错误:变量未定义
2020/06/02 Python
详解python内置模块urllib
2020/09/09 Python
html5 canvas简单封装一个echarts实现不了的饼图
2018/06/12 HTML / CSS
专门经营化妆刷的美国彩妆品牌:Sigma Beauty
2017/09/11 全球购物
size?荷兰官方网站:英国高级运动鞋精品店
2020/07/24 全球购物
编写用C语言实现的求n阶阶乘问题的递归算法
2014/10/21 面试题
Oracle的内存结构(Memory structures)
2015/06/10 面试题
2014年大学生四年规划书范文
2014/04/03 职场文书
高速铁道技术专业求职信
2014/08/09 职场文书
工作失职检讨书(精华篇)
2014/10/15 职场文书
工作保证书
2015/01/17 职场文书
暑期社会实践个人总结
2015/03/06 职场文书
学校艾滋病宣传活动总结
2015/05/09 职场文书
Netty客户端接入流程NioSocketChannel创建解析
2022/03/25 Java/Android