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 匿名函数及其代码模式原理
Mar 19 Javascript
jquery实现checkbox全选全不选的简单实例
Dec 31 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
Jan 28 Javascript
浏览器兼容的JS写法总结
Apr 27 Javascript
jQuery实现动态删除LI的方法
May 30 jQuery
vue router自动判断左右翻页转场动画效果
Oct 10 Javascript
Express进阶之log4js实用入门指南
Feb 10 Javascript
angular4应用中输入的最小值和最大值的方法
May 17 Javascript
基于layui table返回的值的多级嵌套的解决方法
Sep 19 Javascript
JS实现随机点名器
Apr 12 Javascript
vue+echarts实现多条折线图
Mar 21 Vue.js
JS前端监控采集用户行为的N种姿势
Jul 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中的array数组类型分析说明
2010/07/27 PHP
php配置php-fpm启动参数及配置详解
2013/11/04 PHP
php.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
PHP页面实现定时跳转的方法
2014/10/31 PHP
PHP实现检测客户端是否使用代理服务器及其匿名级别
2015/01/07 PHP
CodeIgniter使用smtp服务发送html邮件的方法
2015/06/10 PHP
PHP使用finfo_file()函数检测上传图片类型的实现方法
2017/04/18 PHP
Thinkphp 空操作、空控制器、命名空间(详解)
2017/05/05 PHP
PHP实现微信商户支付企业付款到零钱功能
2018/09/30 PHP
CI框架教程之优化验证码机制详解【验证码辅助函数】
2019/04/16 PHP
PHP+Redis开发的书签案例实战详解
2019/07/09 PHP
use jscript with List Proxy Server Information
2007/06/11 Javascript
基于jQuery UI CSS Framework开发Widget的经验
2010/08/21 Javascript
jQuery中setTimeout的几种使用方法小结
2013/04/07 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
2014/01/22 Javascript
DOM基础教程之事件对象
2015/01/20 Javascript
Js获取图片原始宽高的实现代码
2016/05/17 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
2016/06/14 Javascript
jQuery实现简单的网页换肤效果示例
2016/09/18 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
2018/02/24 jQuery
浅谈小程序 setData学问多
2019/02/20 Javascript
Vue-CLI 项目在pycharm中配置方法
2019/08/30 Javascript
Vue实现商品详情页的评价列表功能
2019/09/04 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
2019/09/13 Javascript
[01:19:46]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
python如何使用unittest测试接口
2018/04/04 Python
基于Pandas读取csv文件Error的总结
2018/06/15 Python
对python插入数据库和生成插入sql的示例讲解
2018/11/14 Python
Python自动化xpath实现自动抢票抢货
2020/09/19 Python
德国鞋子网上商店:Omoda.de
2017/03/31 全球购物
电焊工工作岗位职责
2014/02/06 职场文书
离婚起诉书范文2015
2015/05/19 职场文书
Python if else条件语句形式详解
2022/03/24 Python
5个pandas调用函数的方法让数据处理更加灵活自如
2022/04/24 Python
使用Apache Camel表达REST服务的方法
2022/06/10 Servers
CSS SandBox应用场景及常见问题
2022/06/25 HTML / CSS