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 addBookmark 加入收藏 多浏览器兼容
Aug 15 Javascript
解析Jquery取得iframe中元素的几种方法
Jul 04 Javascript
Javascript基础教程之定义和调用函数
Jan 18 Javascript
JS创建对象的写法示例
Nov 04 Javascript
Vue.js原理分析之observer模块详解
Feb 17 Javascript
原生node.js案例--前后台交互
Feb 20 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
Apr 25 Javascript
微信小程序之onLaunch与onload异步问题详解
Mar 28 Javascript
小程序自定义模板实现吸顶功能
Jan 08 Javascript
JS实现音量控制拖动
Jan 15 Javascript
解决vue init webpack 下载依赖卡住不动的问题
Nov 09 Javascript
JS原生实现轮播图的几种方法
Mar 23 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 getimagesize 上传图片的长度和宽度检测代码
2010/05/15 PHP
php更新mysql后获取影响的行数发生异常解决方法
2013/03/28 PHP
php fsockopen伪造post与get方法的详解
2013/06/14 PHP
php读取torrent种子文件内容的方法(测试可用)
2016/05/03 PHP
php实现的中秋博饼游戏之绘制骰子图案功能示例
2017/11/06 PHP
PHP7数组的底层实现示例
2019/08/25 PHP
laravel框架实现去掉URL中index.php的方法
2019/10/12 PHP
javascript 函数声明与函数表达式的区别介绍
2013/10/05 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
2015/05/04 Javascript
node.js微信公众平台开发教程
2016/03/04 Javascript
javascript事件冒泡简单示例
2016/06/20 Javascript
JS验证图片格式和大小并预览的简单实例
2016/10/11 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
2017/01/17 Javascript
js实现3D图片展示效果
2017/03/09 Javascript
vue的传参方式汇总和router使用技巧
2018/05/22 Javascript
vue.js层叠轮播效果的实例代码
2018/11/08 Javascript
jQuery zTree插件快速实现目录树
2019/08/16 jQuery
微信小程序 冒泡事件原理解析
2019/09/27 Javascript
Angular8 实现table表格表头固定效果
2020/01/03 Javascript
JavaScript实现简易计算器小功能
2020/10/22 Javascript
Python判断直线和矩形是否相交的方法
2015/07/14 Python
Python实现查找系统盘中需要找的字符
2015/07/14 Python
python 递归遍历文件夹,并打印满足条件的文件路径实例
2017/08/30 Python
python使用标准库根据进程名如何获取进程的pid详解
2017/10/31 Python
python实现随机梯度下降法
2020/03/24 Python
Python实现操纵控制windows注册表的方法分析
2019/05/24 Python
Python实现仿射密码的思路详解
2020/04/23 Python
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/04/11 面试题
教师自我评价范例
2013/09/24 职场文书
大学生简单自荐信
2013/11/10 职场文书
读群众路线心得体会
2014/03/07 职场文书
消防标语大全
2014/06/07 职场文书
晚会主持人开场白台词
2015/05/28 职场文书
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS
使用pycharm运行flask应用程序的详细教程
2021/06/07 Python
Python中 range | np.arange | np.linspace三者的区别
2022/03/22 Python