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 相关文章推荐
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
Jan 13 Javascript
javascript学习笔记(二) js一些基本概念
Jun 18 Javascript
js 调用百度地图api并在地图上进行打点添加标注
May 13 Javascript
JS中三目运算符和if else的区别分析与示例
Nov 21 Javascript
MUI 上拉刷新/下拉加载功能实例代码
Apr 13 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
Apr 27 Javascript
AngularJS遍历获取数组元素的方法示例
Nov 11 Javascript
微信小程序实现图片懒加载的示例代码
Dec 13 Javascript
vue轮播图插件vue-concise-slider的使用
Mar 13 Javascript
JavaScript数组去重算法实例小结
May 07 Javascript
微信小程序实现的picker多级联动功能示例
May 23 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
Jul 28 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/04 咖啡文化
php的计数器程序
2006/10/09 PHP
php+jQuery.uploadify实现文件上传教程
2014/12/26 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
PHP抽象类与接口的区别实例详解
2019/05/09 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
Javascript 写的简单进度条控件
2008/01/22 Javascript
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
2010/03/16 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
2013/08/19 Javascript
JavaScript中提前声明变量或函数例子
2014/11/12 Javascript
深入理解JQuery中的事件与动画
2016/05/18 Javascript
AngularJS基础 ng-class-odd 指令示例
2016/08/01 Javascript
JavaScript实现分页效果
2017/03/28 Javascript
Vue表单验证插件Vue Validator使用方法详解
2017/04/07 Javascript
详解vue渲染从后台获取的json数据
2017/07/06 Javascript
js中的闭包实例展示
2018/11/01 Javascript
Vue 实现前进刷新后退不刷新的效果
2019/06/14 Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
2019/08/04 Javascript
js实现石头剪刀布游戏
2020/10/11 Javascript
利用QT写一个极简单的图形化Python闹钟程序
2015/04/07 Python
Tensorflow使用支持向量机拟合线性回归
2018/09/07 Python
python 高效去重复 支持GB级别大文件的示例代码
2018/11/08 Python
对python内置map和six.moves.map的区别详解
2018/12/19 Python
在Python3.74+PyCharm2020.1 x64中安装使用Kivy的详细教程
2020/08/07 Python
使用纯HTML5编写一款网页上的时钟的代码分享
2015/11/16 HTML / CSS
HTML5中判断横屏竖屏的方法(移动端)
2016/08/04 HTML / CSS
《影子》教学反思
2014/02/21 职场文书
幼儿园庆六一活动方案
2014/03/06 职场文书
中学生操行评语大全
2014/04/24 职场文书
学校安全工作汇报材料
2014/08/16 职场文书
房地产经营管理专业自荐信
2014/09/02 职场文书
中秋节国旗下演讲稿
2014/09/05 职场文书
2014年内勤工作总结
2014/11/24 职场文书
公司股份合作协议书
2014/12/07 职场文书
体育活动总结
2015/02/04 职场文书
毕业赠语大全
2015/06/23 职场文书