【学习】滚动延迟加载插件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 ...
随机推荐
- JS中的事件&对象
一.JS中的事件 (一)JS中的事件分类 1.鼠标事件 click/dblclick/onmouseover/onmouseout 2.HTML事件 onload/onscroll/onsubmit/ ...
- 201521123070 《JAVA程序设计》第4周学习总结
1. 本章学习总结 1.1 尝试使用思维导图总结有关继承的知识点. http://naotu.baidu.com/file/4de6f42e4f4f6cce0531dd9997b04e60?token ...
- 201521123069 《Java程序设计》第1周学习总结
1. 本章学习总结 Java语言的发展.特点(面向对象.简单性.平台无关性) 认识并区分JVM(Java虚拟机),JRE(Java执行环境),JDK(Java开发工具包) 安装好JDK,设置Path变 ...
- 201521145048《java程序与设计》第9周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 Q1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自 ...
- JAVA课程设计+五子棋游戏
1. 团队课程设计博客链接 http://www.cnblogs.com/yzb123/p/7063424.html 2. 个人负责模块或任务说明 1.在同伴构建好初始框图的情况下,编写一个继承JPa ...
- 201521123092《java程序设计》第十周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 本次PTA作业题集异常.多线程 1.finally 题目4-2 1.1 截图你的提交结果(出 ...
- MyBatis框架(一)
MyBatis介绍: MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google code,并且改名为 ...
- JSP第六篇【自定义标签之传统标签】
为什么要使用自定义标签? JSTL标签库只提供了简单的输出等功能,没有实现任何的HTML代码封装,并且某些复杂类型转换,或者逻辑处理的时候,JSTL标签库完成不了,需要自定义标签! 编写自定义标签的步 ...
- Spring - Bean的概念及其基础配置
概述 bean说白了就是一个普通的java类的实例,我们在bean中写一些我们的业务逻辑,这些实例由Sping IoC容器管理着.在web工程中的spring配置文件中,我们用<bean/> ...
- mybatis-java-依赖注入
第一种 setXXX形式的注入 我们的所有dao都会继承自定义的BaseDao,因此在BaseDao中完成对所有dao的注入 在DaoUtil中增加方法injectDao()来注入具体的dao pac ...