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 相关文章推荐
使用Math.floor与Math.random取随机整数的方法详解
May 07 Javascript
javascript内存管理详细解析
Nov 11 Javascript
JavaScript获取XML数据附示例截图
Mar 05 Javascript
js简单抽奖代码
Jan 16 Javascript
详解vue静态资源打包中的坑与解决方案
Feb 05 Javascript
一次记住JavaScript的6个正则表达式方法
Feb 22 Javascript
浅谈vue中.vue文件解析流程
Apr 24 Javascript
JS实现计算小于非负数n的素数的数量算法示例
Feb 26 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
Jun 17 Javascript
新手如何快速理解js异步编程
Jun 24 Javascript
layui监听select变化,以及设置radio选中的方法
Sep 24 Javascript
Vue watch响应数据实现方法解析
Jul 10 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 简单数组排序实现代码
2009/08/05 PHP
php检查字符串中是否包含7位GSM字符的方法
2015/03/17 PHP
Yii 访问 Gii(脚手架)时出现 403 错误
2018/06/06 PHP
laravel 模型查询按照whereIn排序的示例
2019/10/16 PHP
this[] 指的是什么内容 讨论
2007/03/24 Javascript
兼容IE和Firefox的javascript获取iframe文档内容的函数
2011/08/15 Javascript
jquery实现加载等待效果示例
2013/09/25 Javascript
js使用栈来实现10进制转8进制与取除数及余数
2014/06/11 Javascript
angularjs客户端实现压缩图片文件并上传实例
2015/07/06 Javascript
JS模拟按钮点击功能的方法
2015/12/22 Javascript
Augularjs-起步详解
2016/07/08 Javascript
js初始化验证实例详解
2016/11/26 Javascript
JavaScript中return用法示例
2016/11/29 Javascript
nodejs中全局变量的实例解析
2017/03/07 NodeJs
xmlplus组件设计系列之按钮(2)
2017/04/26 Javascript
JS触摸事件、手势事件详解
2017/05/04 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
2017/05/19 Javascript
值得收藏的vuejs安装教程
2017/11/21 Javascript
Vue递归实现树形菜单方法实例
2018/11/06 Javascript
玩转Koa之核心原理分析
2018/12/29 Javascript
Vuex中的State使用介绍
2019/01/19 Javascript
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
JS实现简易留言板(节点操作)
2020/03/16 Javascript
轻松实现TensorFlow微信跳一跳的AI
2018/01/05 Python
Django学习笔记之ORM基础教程
2018/03/27 Python
Python2与Python3的区别实例分析
2019/04/11 Python
python与C、C++混编的四种方式(小结)
2019/07/15 Python
python3实现在二叉树中找出和为某一值的所有路径(推荐)
2019/12/26 Python
python实现飞船大战
2020/04/24 Python
Django-silk性能测试工具安装及使用解析
2020/11/28 Python
CSS3之多背景background使用示例
2013/10/18 HTML / CSS
Linux中如何用命令创建目录
2016/12/02 面试题
工程技术员岗位职责
2014/03/02 职场文书
青年文明号服务承诺
2014/03/31 职场文书
离婚协议书的范本
2015/01/27 职场文书
Vue组件化(ref,props, mixin,.插件)详解
2022/05/15 Vue.js