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和JQuery实用代码片段(一)
Apr 07 Javascript
为jquery的ajaxfileupload增加附加参数的方法
Mar 04 Javascript
JS使用for循环遍历Table的所有单元格内容
Aug 21 Javascript
详解JavaScript中void语句的使用
Jun 04 Javascript
javascript中apply、call和bind的使用区别
Apr 05 Javascript
使用jQuery制作基础的Web图片轮播效果
Apr 22 Javascript
基于vue实现swipe分页组件实例
May 25 Javascript
React diff算法的实现示例
Apr 20 Javascript
详解几十行代码实现一个vue的状态管理
Jan 28 Javascript
JS中的算法与数据结构之集合(Set)实例详解
Aug 20 Javascript
基于Vue和Element-Ui搭建项目的方法
Sep 06 Javascript
JavaScript 异步时序问题
Nov 20 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
亚洲咖啡有什么?亚洲咖啡产地介绍 亚洲咖啡有什么特点?
2021/03/05 新手入门
PHP7新特性foreach 修改示例介绍
2016/08/26 PHP
预加载css或javascript的js代码
2010/04/23 Javascript
jquery 实现返回顶部功能
2014/11/17 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
2015/03/25 Javascript
javascript+ajax实现产品页面加载信息
2015/07/09 Javascript
JavaScript 性能优化小结
2015/10/12 Javascript
谈谈AngularJs中的隐藏和显示
2015/12/09 Javascript
微信小程序 MD5加密登录密码详解及实例代码
2017/01/12 Javascript
Vue基于NUXT的SSR详解
2017/10/24 Javascript
vue中的计算属性的使用和vue实例的方法示例
2017/12/04 Javascript
详解vue-cli 接口代理配置
2017/12/13 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
2018/02/08 Javascript
在js代码拼接dom对象到页面上的模板总结
2018/10/21 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
2019/02/02 Javascript
layui时间控件选择时间范围的实现方法
2019/09/28 Javascript
ant-design-vue中tree增删改的操作方法
2020/11/03 Javascript
[01:12](回顾)DOTA2国际邀请赛,全世界DOTAer的盛宴
2014/07/01 DOTA
比较详细Python正则表达式操作指南(re使用)
2008/09/06 Python
python实现协同过滤推荐算法完整代码示例
2017/12/15 Python
TensorFlow实现AutoEncoder自编码器
2018/03/09 Python
通过pykafka接收Kafka消息队列的方法
2018/12/27 Python
将tensorflow.Variable中的某些元素取出组成一个新的矩阵示例
2020/01/04 Python
如何理解Python中包的引入
2020/05/29 Python
Django Form设置文本框为readonly操作
2020/07/03 Python
用python实现一个简单的验证码
2020/12/09 Python
俄罗斯金苹果网上化妆品和香水商店:Goldapple
2019/12/01 全球购物
意大利包包和行李箱销售网站:Bagaglio.it
2021/03/02 全球购物
Linux面试题LINUX系统类
2014/11/19 面试题
搬家公司的创业计划书
2014/01/01 职场文书
学校安全检查制度
2014/01/27 职场文书
2014年教师业务学习材料
2014/05/12 职场文书
服务标语口号
2014/07/01 职场文书
个人查摆剖析材料
2014/10/04 职场文书
2015年度对口支援工作总结
2015/07/22 职场文书
《王者天下》第4季首话新剧照 4月9日正式开播
2022/04/07 日漫