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 相关文章推荐
js 静态动态成员 and 信息的封装和隐藏
May 29 Javascript
jQuery不兼容input的change事件问题解决过程
Dec 05 Javascript
java必学必会之static关键字
Dec 03 Javascript
javascript简单判断输入内容是否合法的方法
May 11 Javascript
jQuery实现ToolTip元素定位显示功能示例
Nov 23 Javascript
JS实现动态修改table及合并单元格的方法示例
Feb 20 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
Dec 01 Javascript
vue select二级联动第二级默认选中第一个option值的实例
Jan 10 Javascript
浅谈Redux中间件的实践
Jul 27 Javascript
js中apply()和call()的区别与用法实例分析
Aug 14 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
Apr 28 Javascript
jQuery+ajax实现用户登录验证
Sep 13 jQuery
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中用正则表达式清除字符串的空白
2011/01/17 PHP
一个PHP的远程图片抓取函数分享
2013/09/25 PHP
PHP中使用php5-ffmpeg撷取视频图片实例
2015/01/07 PHP
PHP删除指定目录中的所有目录及文件的方法
2015/02/26 PHP
Jquery选择器 $实现原理
2009/12/02 Javascript
JS 页面计时器示例代码
2013/10/28 Javascript
使用javascript实现json数据以csv格式下载
2015/01/09 Javascript
jquery简单实现图片切换效果的方法
2015/05/12 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
2015/09/09 Javascript
新入门node.js必须要知道的概念(必看篇)
2016/08/10 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
2016/08/19 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
2016/12/26 Javascript
浅谈Vue的基本应用
2016/12/27 Javascript
jQuery简单绑定单个事件的方法示例
2017/06/10 jQuery
浅谈原型对象的常用开发模式
2017/07/22 Javascript
vue使用监听实现全选反选功能
2018/07/06 Javascript
微信小程序实现翻牌抽奖动画
2020/09/21 Javascript
vue编写简单的购物车功能
2021/01/08 Vue.js
布同自制Python函数帮助查询小工具
2011/03/13 Python
一个超级简单的python web程序
2014/09/11 Python
python冒泡排序简单实现方法
2015/07/09 Python
python中的常量和变量代码详解
2018/07/25 Python
简单了解Python字典copy与赋值的区别
2020/09/16 Python
使用phonegap克隆和删除联系人的实现方法
2017/03/31 HTML / CSS
澳大利亚二手奢侈品网站:Modsie
2019/09/23 全球购物
十岁生日家长答谢词
2014/01/17 职场文书
文秘档案管理岗位职责
2014/03/06 职场文书
物流管理专业毕业生求职信
2014/03/23 职场文书
大四学生找工作的自荐信
2014/03/27 职场文书
书香家庭事迹材料
2014/05/09 职场文书
小学优秀学生评语
2014/12/29 职场文书
中学生社区服务活动报告
2015/02/05 职场文书
介绍信范文大全
2015/05/07 职场文书
八年级数学教学反思
2016/02/17 职场文书
opencv检测动态物体的实现
2021/07/21 Python
mysql数据库隔离级别详解
2022/06/16 MySQL