【学习】滚动延迟加载插件scrollLoading用法
今天遇到一个很好用的滚动延迟加载的插件,作者是我的偶象大神张鑫旭,其博客为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用法的更多相关文章
- 动态延迟加载网页元素jQuery插件scrollLoading
如果一个网页很长,那么该页面的加载时间也会相应的较长.而这里给大家介绍的这个jQuery插件scrollLoading的作用则是,对页面元素进行动态加载,通俗的说就是滚到哪就加载到哪,屏幕以下看不见的 ...
- 功能强大的滚动播放插件JQ-Slide
查看效果:http://keleyi.com/keleyi/phtml/jqplug/4.htmJQ-Slide插件功能强大,滚动方式自由多样全部滚动方式 方式一 方式二 方式三 方式四 方式五 方式 ...
- Bootstrap Affix(附加导航(Affix)插件的用法)
原文网址:http://www.runoob.com/bootstrap/bootstrap-affix-plugin.html Bootstrap 附加导航(Affix)插件 附加导航(Affix) ...
- 第一次自己写jquery图片延迟加载插件,不通用,但修改一下还是可以使用到很多页面上的
不断修改完善中…… /*! * jquery.lazyoading.js *自定义的页面图片延迟加载插件,比网上的jquery.lazyload简单,也更适合自己的网站 *使用方法: 把img 的cl ...
- JAVA学习笔记 (okHttp3的用法)
最近的项目中有个接口是返回文件流数据,根据我们这边一个验签的插件,我发现里面有okHttpClient提供了Call.Factory,所以就学习了下okHttp3的用法. 1.概述 okhttp是一个 ...
- 图片延时加载原理 和 使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
图片加载技术分为:图片预加载和图片延时加载. javascript图片预加载和延时加载的区别主要体现在图片传输到客户端的时机上,都是为了提升用户体验的,延时加载又叫懒加载.两种技术的本质:两者的行为是 ...
- 原生Js页面滚动延迟加载图片
原理和过程1.页面滚动加载事件2.获取元素在页面里的top值 根据滚动条的位置 判断何时显示图片3.获取元素集合 加载过的图片从集合里删除 效果预览:http://jsfiddle.net/dtdxr ...
- jquery插件的用法之cookie 插件
一.使用cookie 插件 插件官方网站下载地址:http://plugins.jquery.com/cookie/ cookie 插件的用法比较简单,直接粘贴下面代码示例: //生成一个cookie ...
- 推荐一个内容滚动jquery插件
myslider是一个内容滚动jquery插件,版本0.1.2的每次滚动内容是一行内容,可以是文字,可以是一个链接,还可以是图片. 官方网址:http://keleyi.com/jq/myslider ...
随机推荐
- 【Beta】Daily Scrum Meeting——Day4
站立式会议照片 1.本次会议为第四次Meeting会议: 2.本次会议在早上9:35,在陆大2楼机房召开,本次会议为25分钟讨论今天要完成的任务以及接下来的任务安排. 燃尽图 每个人的工作分配 成 员 ...
- 团队作业4——第一次项目冲刺(Alpha版本)2017.4.25
在下午的1,2节软件课程结束后,我们teamworkers全体队员在禹州楼302利用课间时间进行约15分钟的短暂会议,会议的内容为阐述昨天开发遇到的问题,大家都提出自己的看法,最后统一了意见,队员互相 ...
- 201521123037 《Java程序设计》第8周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 1.2 选做:收集你认为有用的代码片段 1. String[] list1=str.split(" ...
- 第2周作业-Java基本语法与类库
1. 本周学习总结 答:① 定义流程控制的各种条件式是同以前学习的一样,要善于运用快捷键.(例如`a/t` + `/` ) ② 熟悉输入输出的使用,注意输入的变量类型使用相应的输入类. ③ 数组对象: ...
- 201521123096《Java程序设计》第十二周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将Student对象(属性:int id, String name,int age,doubl ...
- Struts访问的时候出现request=null的情况
今天用Struts框架写个小应用的时候,出现了如下问题 private File upload; private String uploadContentType; private Str ...
- 在 Ubuntu 上安装 MongoDB
在 Ubuntu 上安装 MongoDB 运行下列命令,导入 MongoDB 公开 GPG 键: sudo apt-key adv --keyserver hkp://keyserver.ubuntu ...
- Codeforce 854 A. Fraction
A. Fraction time limit per test 1 second memory limit per test 512 megabytes input standard input ou ...
- Spring定时器的使用详解
写个最简单的demo吧,反正睡前没什么事儿,来祸害一下园子~~虽然我菜,但是我不会承认啊,哈哈哈 明天详细补充点儿吧,很晚了,不睡觉的程序员不是好程序员,我总能给自己找借口~~~ //spring开启 ...
- 分享基于分布式Http长连接框架--架构模型
我画了个简单的架构图来帮助说明: 其实为发布订阅架构模式. 生产者和消费者我们统一可理解为客户端,消息中间件可认为是服务端. 生产者和消费者做为客户端要跟服务端交互,则先通过代理订阅服务端,订阅成功后 ...