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中eval详解
Mar 30 Javascript
JS基于面向对象实现的拖拽库实例
Sep 24 Javascript
jQuery实现根据滚动条位置加载相应内容功能
Jul 18 Javascript
jQuery复制节点用法示例(clone方法)
Sep 08 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
Jan 19 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
Jul 18 Javascript
js禁止Backspace键使浏览器后退的实现方法
Sep 01 Javascript
使用node打造自己的命令行工具方法教程
Mar 26 Javascript
vue ssr 实现方式(学习笔记)
Jan 18 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
Jan 16 Javascript
基于JavaScript实现留言板功能
Mar 16 Javascript
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
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中操作MySQL数据库的一些要注意的问题
2006/10/09 PHP
用PHP发电子邮件
2006/10/09 PHP
基于pear auth实现登录验证
2010/02/26 PHP
PHP中header和session_start前不能有输出原因分析
2013/01/11 PHP
PHP图像裁剪缩略裁切类源码及使用方法
2016/01/07 PHP
Javascript操纵Cookie实现购物车程序
2007/02/15 Javascript
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
2009/07/14 Javascript
ExtJS 入门
2010/10/29 Javascript
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
2011/10/22 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
2012/10/24 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
2016/05/07 Javascript
JavaScript基于对象去除数组重复项的方法
2016/10/09 Javascript
vue远程加载sfc组件思路详解
2019/12/25 Javascript
[51:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/30 DOTA
python算法学习之计数排序实例
2013/12/18 Python
Python cookbook(数据结构与算法)让字典保持有序的方法
2018/02/18 Python
python 中if else 语句的作用及示例代码
2018/03/05 Python
dataframe设置两个条件取值的实例
2018/04/12 Python
python+mysql实现学生信息查询系统
2019/02/21 Python
Python with用法:自动关闭文件进程
2019/07/10 Python
python Django中models进行模糊查询的示例
2019/07/18 Python
python的scipy实现插值的示例代码
2019/11/12 Python
pytorch中的transforms模块实例详解
2019/12/31 Python
在服务器上安装python3.8.2环境的教程详解
2020/04/26 Python
如何基于pandas读取csv后合并两个股票
2020/09/25 Python
Django权限控制的使用
2021/01/07 Python
Perricone MD裴礼康美国官网:抗衰老护肤品
2016/09/26 全球购物
Wiggle美国:英国骑行、跑步、游泳、铁人三项商店
2018/10/27 全球购物
StubHub希腊:购买体育赛事、音乐会和剧院门票
2019/08/03 全球购物
实习护理工作自我评价
2013/09/25 职场文书
党的群众路线教育实践活动动员会主持词
2014/03/20 职场文书
党员批评与自我批评发言
2014/10/02 职场文书
初中教师德育工作总结2015
2015/05/12 职场文书
个人职业生涯规划之自我评估篇
2019/09/03 职场文书
golang日志包logger的用法详解
2021/05/05 Golang
浅谈spring boot使用thymeleaf版本的问题
2021/08/04 Java/Android