今天遇到一个很好用的滚动延迟加载的插件,作者是我的偶象大神张鑫旭,其博客为http://www.zhangxinxu.com/

以前也写过这种效果,用的是lazyload,不过只能实现图片的加载。而​scrollLoading可以实现任意内容的滚动延迟加载,这就是其最妙的地方。

插件背景和原理神马的,偶象大神已经说的很详细了,我这里只贴出其具体用法:

1、下载插件http://www.zhangxinxu.com/study/js/jquery.scrollLoading.js

2、引入jquery库文件和插件文件

3、html主文件中设置一个容器div,里面写进未加载之前的内容,可以是一行文字“加载中”,也可以是一张等待加载的图片,为div添加一个data-url的属性,并设置data-url="loaded.html"。引用偶象原话:“在HTML5中,以data-开头的自定义属性都是合法的,且地址可以是图片,页面等属性。”

loaded.html文件是做什么的,就是存放需要加载的内容的呗。

4、插件调用:$(".容器名").scrollLoading();

经过测试,本地除了谷歌浏览器,都可以运行,并可以在开发者工具代码查看器中看到加载的动态过程。谷歌浏览器,怎么回事呢,按理讲,说不兼容也应该是ie啊,谷歌怎么也轮不到吧,没错,注意前面我说的是“本地测试”,所以嘛,把代码放到服务器上一运行,完全没问题!所以说,这个插件真是又简洁又高效且全兼容,最关键是太好用了哇!

附上一个简单的demo吧:http://pan.baidu.com/s/1eS8VAsq

最后附上原文地址http://www.zhangxinxu.com/wordpress/?p=1259

【学习】滚动延迟加载插件scrollLoading用法的更多相关文章

  1. 动态延迟加载网页元素jQuery插件scrollLoading

    如果一个网页很长,那么该页面的加载时间也会相应的较长.而这里给大家介绍的这个jQuery插件scrollLoading的作用则是,对页面元素进行动态加载,通俗的说就是滚到哪就加载到哪,屏幕以下看不见的 ...

  2. 功能强大的滚动播放插件JQ-Slide

    查看效果:http://keleyi.com/keleyi/phtml/jqplug/4.htmJQ-Slide插件功能强大,滚动方式自由多样全部滚动方式 方式一 方式二 方式三 方式四 方式五 方式 ...

  3. Bootstrap Affix(附加导航(Affix)插件的用法)

    原文网址:http://www.runoob.com/bootstrap/bootstrap-affix-plugin.html Bootstrap 附加导航(Affix)插件 附加导航(Affix) ...

  4. 第一次自己写jquery图片延迟加载插件,不通用,但修改一下还是可以使用到很多页面上的

    不断修改完善中…… /*! * jquery.lazyoading.js *自定义的页面图片延迟加载插件,比网上的jquery.lazyload简单,也更适合自己的网站 *使用方法: 把img 的cl ...

  5. JAVA学习笔记 (okHttp3的用法)

    最近的项目中有个接口是返回文件流数据,根据我们这边一个验签的插件,我发现里面有okHttpClient提供了Call.Factory,所以就学习了下okHttp3的用法. 1.概述 okhttp是一个 ...

  6. 图片延时加载原理 和 使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)

    图片加载技术分为:图片预加载和图片延时加载. javascript图片预加载和延时加载的区别主要体现在图片传输到客户端的时机上,都是为了提升用户体验的,延时加载又叫懒加载.两种技术的本质:两者的行为是 ...

  7. 原生Js页面滚动延迟加载图片

    原理和过程1.页面滚动加载事件2.获取元素在页面里的top值 根据滚动条的位置 判断何时显示图片3.获取元素集合 加载过的图片从集合里删除 效果预览:http://jsfiddle.net/dtdxr ...

  8. jquery插件的用法之cookie 插件

    一.使用cookie 插件 插件官方网站下载地址:http://plugins.jquery.com/cookie/ cookie 插件的用法比较简单,直接粘贴下面代码示例: //生成一个cookie ...

  9. 推荐一个内容滚动jquery插件

    myslider是一个内容滚动jquery插件,版本0.1.2的每次滚动内容是一行内容,可以是文字,可以是一个链接,还可以是图片. 官方网址:http://keleyi.com/jq/myslider ...

随机推荐

  1. 团队作业4——第一次项目冲刺 SeCOnd DaY

    项目冲刺--Double Kill 喂喂喂,你好你好,听得见吗?这里是天霸动霸.tua广播站,我是主播小学生¥-¥ 第一次敏捷冲刺平稳的度过了第一天,第一天的任务大家也圆满完成啦[拍手庆祝],那么今天 ...

  2. 团队作业8——第二次项目冲刺(Beta阶段)--第二天

    团队作业8--第二次项目冲刺(Beta阶段)--第二天 会议照片: 燃尽图: 项目进展: 今天完成了记录用户的姓名,其他的任务还在跟进. 团队贡献比: 队员 角色 团队贡献比 陈麟凤 PM 16% 张 ...

  3. 第二次项目冲刺(Beta阶段)--第四天

    一.站立式会议照片 二.项目燃尽图 三.项目进展 队员  ID 贡献比 王若凡 201421123022 20% 吕志哲 201421123021 16% 欧阳勇 201421123026 16% 卢 ...

  4. 控制结构(10) 指令序列(opcode)

    // 上一篇:管道(pipeline) 发现问题 在一个正式项目的开发周期中,除了源代码版本控制外,还存在着项目的配置/编译/打包/发布等各种高频但非"核心"的脚本代码.职业程序员 ...

  5. 201521123057 《Java程序设计》第4周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 2. 书面作业 注释的应用 使用类的注释与方法的注释为前面编写的类与方法进行注释,并在Eclipse中查看.(截图) 答: 面向对象 ...

  6. 201521123080《Java程序设计》第9周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己以前 ...

  7. 201521123104《Java程序设计》第11周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 1. 互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) 1.1 除了使用sync ...

  8. 【干货篇】步步为营,带你轻松掌握jQuery!

    写在前面:经过系统的学习了原生JS之后,会发现其具有以下三个特点: 1.是一种解释性脚本语言(代码不进行预编译). 2.主要用来向 HTML 页面添加交互行为. 3.可以直接嵌入 HTML 页面,但写 ...

  9. spring的一些问题

    1.什么是spring? spring是一个轻量级的一站式框架,它的核心有两个部分,1.aop面向切面编程 2.ioc控制反转. 2.什么是aop aop就是面向切面编程,使用aop可以使业务逻辑各个 ...

  10. Java学习笔记二---设置环境变量JAVA_HOME,CLASSPATH,PATH

    1.环境变量包括: JAVA_HOME,CLASSPATH,PATH 2.设置环境变量的目的: 路径搜索,方便查找到jdk的安装路径.方便搜索用到的类文件.方便搜索用到的可执行文件如java,java ...