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的商品展示放大镜
Aug 07 Javascript
jquery 删除cookie失效的解决方法
Nov 12 Javascript
原生的html元素选择器类似jquery选择器
Oct 15 Javascript
jQuery实现的调整表格行tr上下顺序
Jan 10 Javascript
Bootstrap布局之栅格系统详解
Jun 13 Javascript
js判断浏览器是否支持严格模式的方法
Oct 04 Javascript
Ionic+AngularJS实现登录和注册带验证功能
Feb 09 Javascript
JS实现的简单拖拽功能示例
Mar 13 Javascript
原生JS实现圆环拖拽效果
Apr 07 Javascript
使用vuex解决刷新页面state数据消失的问题记录
May 08 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
Aug 14 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
Nov 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
JoshChen_php新手进阶高手不可或缺的规范介绍
2013/08/16 PHP
PHP实现基于状态的责任链审批模式详解
2019/05/31 PHP
Nigma vs Liquid BO3 第一场2.14
2021/03/10 DOTA
javascript学习笔记(十四) window对象使用介绍
2012/06/20 Javascript
JavaScript控制Session操作方法
2013/01/17 Javascript
js修改input的type属性问题探讨
2013/10/12 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
2014/08/30 Javascript
浅谈JavaScript字符串与数组
2015/06/03 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
2015/12/02 Javascript
修改jquery中dialog的title属性方法(推荐)
2016/08/26 Javascript
javascript实现的上下无缝滚动效果
2016/09/19 Javascript
深入理解bootstrap框架之第二章整体架构
2016/10/09 Javascript
JS实现给对象动态添加属性的方法
2017/01/05 Javascript
jquery与ajax获取特殊字符实例详解
2017/01/08 Javascript
浅谈react前后端同构渲染
2017/09/20 Javascript
浅谈vue,angular,react数据双向绑定原理分析
2017/11/28 Javascript
vue 实现axios拦截、页面跳转和token 验证
2018/07/17 Javascript
在小程序中推送模板消息的实现方法
2019/07/22 Javascript
我所理解的JavaScript中的this指向
2020/09/04 Javascript
[57:41]Secret vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python中使用sys模板和logging模块获取行号和函数名的方法
2014/04/15 Python
Python os模块介绍
2014/11/30 Python
在Python的Django框架中编写错误提示页面
2015/07/22 Python
windows下ipython的安装与使用详解
2016/10/20 Python
Python机器学习之决策树算法实例详解
2017/12/06 Python
Python实用技巧之列表、字典、集合中根据条件筛选数据详解
2018/07/11 Python
爬虫代理池Python3WebSpider源代码测试过程解析
2019/12/20 Python
tensorflow保持每次训练结果一致的简单实现
2020/02/17 Python
基于Pytorch SSD模型分析
2020/02/18 Python
Pycharm最常用的快捷键及使用技巧
2020/03/05 Python
python读取hdfs并返回dataframe教程
2020/06/05 Python
h5调用摄像头的实现方法
2016/06/01 HTML / CSS
linux面试题参考答案(6)
2016/06/23 面试题
法学专业大学生实习自我鉴定
2014/10/05 职场文书
税务会计岗位职责
2015/04/02 职场文书
三八妇女节新闻稿
2015/07/17 职场文书