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压缩工具 yuicompressor 使用教程
Mar 31 Javascript
jquery动态增加text元素以及删除文本内容实例代码
Jul 01 Javascript
JavaScript获取元素尺寸和大小操作总结
Feb 27 Javascript
Javascript字符串常用方法详解
Jul 21 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
Aug 08 Javascript
通过BootStrap实现轮播图的实际应用
Sep 26 Javascript
详解Angular 4.x NgIf 的用法
May 22 Javascript
Vue组件通信的四种方式汇总
Feb 08 Javascript
JS实现的3des+base64加密解密算法完整示例
May 18 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
Jul 03 Javascript
Vue接口封装的完整步骤记录
May 14 Vue.js
vue/cli 配置动态代理无需重启服务的方法
May 20 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生成excel文件的简单方法
2014/02/08 PHP
ThinkPHP文件上传实例教程
2014/08/22 PHP
WordPress中用于获取及自定义头像图片的PHP脚本详解
2015/12/17 PHP
php intval函数用法总结
2019/04/14 PHP
用JavaScript调用WebService的示例
2008/04/07 Javascript
jQuery1.5.1 animate方法源码阅读
2011/04/05 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
2013/12/27 Javascript
JS记录用户登录次数实现代码
2014/01/15 Javascript
jQuery+ajax简单实现文件上传的方法
2016/06/03 Javascript
jQuery EasyUi 验证功能实例解析
2017/01/06 Javascript
JavaScript获取URL参数的方法之一
2017/03/24 Javascript
详解angular 中的自定义指令之详解API
2017/06/20 Javascript
Vue三层嵌套路由的示例代码
2018/05/05 Javascript
微信小程序城市选择及搜索功能的方法
2019/03/22 Javascript
js验证身份证号码记录的方法
2019/04/26 Javascript
Node.js实现一个HTTP服务器的方法示例
2019/05/13 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
2019/09/12 Javascript
layui禁用侧边导航栏点击事件的解决方法
2019/09/25 Javascript
js实现点赞效果
2020/03/16 Javascript
[04:40]2016个国际邀请赛中国区预选赛场地——华西村观战指南
2016/06/25 DOTA
Python探索之创建二叉树
2017/10/25 Python
Python编程实现双链表,栈,队列及二叉树的方法示例
2017/11/01 Python
Python Datetime模块和Calendar模块用法实例分析
2019/04/15 Python
python批量检查两个对应的txt文件的行数是否一致的实例代码
2020/10/31 Python
纯CSS实现的大小渐变、渐远效果
2014/04/15 HTML / CSS
HTML5+CSS3应用详解
2014/02/24 HTML / CSS
用html5实现语音搜索框的方法
2014/03/18 HTML / CSS
保洁主管岗位职责
2013/11/20 职场文书
安全生产投入制度
2014/01/29 职场文书
园艺师求职信
2014/03/10 职场文书
个人优缺点总结
2015/02/28 职场文书
2015秋季幼儿园开学寄语
2015/03/25 职场文书
人事任命通知书
2015/04/21 职场文书
质量整改通知单
2015/04/21 职场文书
利用Python判断整数是否是回文数的3种方法总结
2021/07/07 Python
baselines示例程序train_cartpole.py的ImportError
2022/05/20 Python