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 相关文章推荐
Javascript中找到子元素在父元素内相对位置的代码
Jul 21 Javascript
JS简单的轮播的图片滚动实例
Jun 17 Javascript
多种方式实现JS调用后台方法进行数据交互
Aug 20 Javascript
详解AngularJS中的表达式使用
Jun 16 Javascript
js实现的二级横向菜单条实例
Aug 22 Javascript
iScroll.js 使用方法参考
May 16 Javascript
JavaScript 闭包详细介绍
Sep 28 Javascript
原生node.js案例--前后台交互
Feb 20 Javascript
Angular X中使用ngrx的方法详解(附源码)
Jul 10 Javascript
Angular 2.0+ 的数据绑定的实现示例
Aug 09 Javascript
three.js中文文档学习之通过模块导入
Nov 20 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
Nov 07 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/10/25 PHP
PHP的反射类ReflectionClass、ReflectionMethod使用实例
2014/08/05 PHP
VBScript版代码高亮
2006/06/26 Javascript
不一样的文字闪烁 轮番闪烁
2009/11/11 Javascript
JQuery index()方法使用代码
2010/06/02 Javascript
jQuery LigerUI 使用教程入门篇
2012/01/18 Javascript
jquery的ajax跨域请求原理和示例
2014/05/08 Javascript
nodejs 整合kindEditor实现图片上传
2015/02/03 NodeJs
javascript实现客户端兼容各浏览器创建csv并下载的方法
2015/03/23 Javascript
使用JavaScript的AngularJS库编写hello world的方法
2015/06/23 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
2015/08/20 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
2017/01/16 Javascript
浅析Node.js非对称加密方法
2018/01/29 Javascript
vue构建动态表单的方法示例
2018/09/22 Javascript
jQuery使用bind动态绑定事件无效的处理方法
2018/12/11 jQuery
大转盘抽奖小程序版 转盘抽奖网页版
2020/04/16 Javascript
Vue.js watch监视属性知识点总结
2019/11/11 Javascript
vant picker+popup 自定义三级联动案例
2020/11/04 Javascript
Python的Django框架中URLconf相关的一些技巧整理
2015/07/18 Python
利用python将图片转换成excel文档格式
2017/12/30 Python
python实现简单加密解密机制
2019/03/19 Python
python变量的存储原理详解
2019/07/10 Python
python通过文本在一个图中画多条线的实例
2020/02/21 Python
Python中的xlrd模块使用原理解析
2020/05/21 Python
如何用tempfile库创建python进程中的临时文件
2021/01/28 Python
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
2014/06/23 HTML / CSS
Artist Guitars新西兰:乐器在线商店
2017/09/17 全球购物
简历自我评价怎么写好呢?
2014/01/04 职场文书
行政主管职责范本
2014/03/07 职场文书
物业品质提升方案
2014/06/08 职场文书
霸气队列口号
2014/06/18 职场文书
大学生求职信例文
2014/06/29 职场文书
制冷与空调专业毕业生推荐信
2014/07/07 职场文书
《倍数和因数》教学反思
2016/02/23 职场文书
2019年大学生职业生涯规划书最新范文
2019/03/25 职场文书
解决Git推送错误non-fast-forward的方法
2022/06/25 Servers