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 相关文章推荐
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
Apr 07 Javascript
jQuery判断元素是否是隐藏的代码
Apr 24 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
May 03 Javascript
js 定义对象数组(结合)多维数组方法
Jul 27 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
Sep 15 Javascript
浅析Javascript中双等号(==)隐性转换机制
Oct 27 Javascript
webpack的CSS加载器的使用
Sep 11 Javascript
mpvue小程序循环动画开启暂停的实现方法
May 15 Javascript
vue+elementUi图片上传组件使用详解
Aug 20 Javascript
node获取客户端ip功能简单示例
Aug 24 Javascript
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
Nov 09 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模板,主要想体现一下思路
2006/12/25 PHP
php 编写安全的代码时容易犯的错误小结
2010/05/20 PHP
PHP简单读取PDF页数的实现方法
2016/07/21 PHP
自制PHP框架之设计模式
2017/05/07 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
csdn 博客的css样式 v3
2009/02/24 Javascript
教您去掉ie网页加载进度条的方法
2010/12/09 Javascript
jquery.cookie用法详细解析
2013/12/18 Javascript
用js控制组织结构图可以任意拖拽到指定位置
2014/01/17 Javascript
如何用JavaScript定义一个类
2014/09/12 Javascript
分享一个自己写的简单的javascript分页组件
2015/02/15 Javascript
jQuery实现图片向左向右切换效果的简单实例
2016/05/18 Javascript
JS碰撞运动实现方法详解
2016/12/15 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
2017/03/25 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
2017/05/13 jQuery
Vue2.0实现购物车功能
2017/06/05 Javascript
JS库之ParticlesJS使用简介
2017/09/12 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
2020/01/16 Javascript
vue实现图片上传功能
2020/05/28 Javascript
Node.js 深度调试方法解析
2020/07/28 Javascript
[00:17]游戏风云独家报道:DD赛后说出数字秘密 吓死你们啊!
2014/07/13 DOTA
[38:32]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第二局
2016/02/26 DOTA
python ansible服务及剧本编写
2017/12/29 Python
python实现简单的单变量线性回归方法
2018/11/08 Python
django配置连接数据库及原生sql语句的使用方法
2019/03/03 Python
pyqt 实现QlineEdit 输入密码显示成圆点的方法
2019/06/24 Python
判断Threading.start新线程是否执行完毕的实例
2020/05/02 Python
IntelliJ 中配置 Anaconda的过程图解
2020/06/01 Python
HTML5 Canvas绘制文本及图片的基础教程
2016/03/14 HTML / CSS
amaze ui 的使用详细教程
2020/08/19 HTML / CSS
事业单位绩效考核实施方案
2014/03/27 职场文书
优秀学生评语大全
2014/04/25 职场文书
党员年度个人总结
2015/02/14 职场文书
2016年党员岗位承诺书
2016/03/24 职场文书
送给客户微信问候语!
2019/07/04 职场文书
Spring Boot 整合 Apache Dubbo的示例代码
2021/07/04 Java/Android