今天遇到一个很好用的滚动延迟加载的插件,作者是我的偶象大神张鑫旭,其博客为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. 【深入Java虚拟机】之八:Java垃圾收集机制

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/18076173 对象引用 Java中的垃圾回收一般是在Java堆中进行,因为堆中几乎存放了J ...

  2. JavaScript 的使用基础总结②DOM

    HTML DOM 通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素. 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HT ...

  3. 英语学习APP的案例分析

    第一部分 调研, 评测 1.第一次上手体验 首界面友好,因为该软件面向的用户有一大部分是想提升自己英语水平的学生,所以每日例句放在首页以便一打开就能看见,同时配以图片展示,让色彩显得比较丰富,让学生从 ...

  4. 201521123083《Java程序设计》第二周学习总结

    [TOC] 1. 本周学习总结 这周我花在java里面的时间就是在做pta和看课本继承,接口和多态这几章的内容. 在pta上的总结: 详细的具体在后面pta实验中总结再说,这里先说几点. 借着List ...

  5. java可访问修饰符

    修饰符 同一个类中 同一个包中 不同包的子类 不提供包的非子类 private √ friendly(省略) √ √ protected √ √ √ public √ √ √ √

  6. 201521123122 《java程序设计》第七周学习总结

    201521123122 <java程序设计>第七周实验总结 1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 2. 书面作业 ArrayList代码分析 1.1 ...

  7. 201521123007《Java程序设计》第1周学习总结

    1. 本周学习总结 了解了JAVA语言的发展历史及特点,还有JDK.JRE.JVM三者之间的关系,安装并设置JAVA开发平台,使用Notepad++和Eclipse编辑器编写JAVA程序并运行,学会使 ...

  8. Java并发之synchronized关键字

         上篇文章我们主要介绍了并发的基本思想以及线程的基本知识,通过多线程我们可以实现对计算机资源的充分利用,但是在最后我们也说明了多线程给程序带来的两种典型的问题,针对它们,synchronize ...

  9. shell(sed/gawk)脚本(计算目录文件/验证电话号码/解析电子邮件地址)

    1.计算目录文件 #!/bin/bash mypath=`echo $PATH | sed 's/:/ /g'`#注意` ` 和 ‘ ’ count= for directory in $mypath ...

  10. MySQL集群(一)之主从复制

    前面学完了JDBC,接下来带大家感受一下MySQL集群!其实什么是MySQL集群?简单的说就是一群机器(服务器)的集合,它们连在一起来工作. 其实各种数据库都有自己的集群,常常的多: 我们要学习的就是 ...