【学习】滚动延迟加载插件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 ...
随机推荐
- Java8-初识Lambda
廉颇老矣,尚能饭否 Java,这位已经20多岁的编程语言,称得上是编程语言界的老大哥了.他曾经攻城略地,碾压各路编程语言小弟,风光无限,不可一世.现在,也是家大业大,江湖地位,很难撼动. 但是,这依然 ...
- 团队作业8——第二次项目冲刺(Beta阶段)日志集合处
Beta版本冲刺 http://www.cnblogs.com/vviane1/p/6886049.html 第一天(2017.05.22) http://www.cnblogs.com/vviane ...
- 团队作业4——第一次项目冲刺(Alpha版本)第六天and第七天
团队作业4--第一次项目冲刺(Alpha版本)第六天and第七天 第一次项目冲刺(Alpha版本)第六天 一.Daily Scrum Meeting照片 二.燃尽图 1.解释说明横纵坐标代表的含义 ...
- 201521123077 《Java程序设计》第6周学习总结
1. 本周学习总结 1.1 向对象思想总结 1.2 使用常规方法总结其他上课内容 Swing一些常用组件的基本用法 Object类的clone及hashcode方法 2. 书面作业 1. clone方 ...
- 201521123087 《Java程序设计》第5周学习总结
1. 本周学习总结 2. 书面作业 作业参考文件下载 代码阅读:Child压缩包内源代码1.1 com.parent包中Child.java文件能否编译通过?哪句会出现错误?试改正该错误.并分析输出结 ...
- MySql数据库第一天
LAMP linux apache mysql php的关系服务器软件 “服务器” 数据库 操作 mysql常用数据类型:int varchar float double bit datetime. ...
- 【DDD】业务建模实践 —— 删除帖子
本文是基于上一篇‘业务建模战术’的实践,主要讲解‘删除帖子’场景的业务建模,包括:业务建模.业务模型.示例代码:示例代码会使用java编写,文末附有github地址.相比于<领域驱动设计> ...
- 如何加固Linux系统
如何加固Linux系统 一. 账户安全 1.1 锁定系统中多余的自建帐号 检查方法: 执行命令 #cat /etc/passwd #cat /etc/shadow 查看账户.口令文件,与系统管理员确认 ...
- JavaScript中的位置屬性
屏幕中的位置(直接使用,無需前綴): screenLeft.screenTop:除了火狐都支持 screenX.screenY: 窗口的大小(谷歌的inner=outer,直接使用,無需前綴): in ...
- win7系统Myeclipse下切换SVN用户
Eclipse的SVN插件Subclipse做得很好,在svn操作方面提供了很强大丰富的功能.但到目前为止,该插件对svn用户的概念极为淡薄,不但不能方便地切换用户,而且一旦用户的帐号.密码保存之后 ...