今天遇到一个很好用的滚动延迟加载的插件,作者是我的偶象大神张鑫旭,其博客为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. oop6 栈 界面

    作业要求 本次作业要求实现核心算法,请将表达式生成的代码及相关的检验.计算表达式结果的代码贴在博客中,并对代码进行必要的解释. 发表一篇博客,博客内容为:提供本次作业的github链接,本次程序运行的 ...

  2. 201521123003《Java程序设计》第7周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 参考资料: XMind 2. 书面作业 Q1.ArrayList代码分析 1.1 解释ArrayList的contains源 ...

  3. 201521123101 《Java程序设计》第4周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. 理解类的继承的概念,明白父与子之间关系的 2. 书面作业 1.注释的应用,使用类的注释与方法 ...

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

    1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. private不对用户公开进行修改,public用户可以进行修改.代码可以进行继承,即子类继 ...

  5. 201521123004《Java程序设计》第9周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 答:思维导图如下: Java中使用try-catch语法处理异常: try { 可能产生异常的代码段 }catch ...

  6. JS运算符的一些简单练习和应用

    练习-01    判断奇数偶数           var num =prompt("请输入一个数");                                    al ...

  7. 假设我的朋友账号分别是v{1,2,3,4,5},且这五人想要共享一个目录,因此应该加入同一个群组,假设这个群组为vbird,且这五个账号的密码均为password.那该如何建置这五个账号?

    假设我的朋友账号分别是v{1,2,3,4,5},且这五人想要共享一个目录,因此应该加入同一个群组,假设这个群组为vbird,且这五个账号的密码均为password.那该如何建置这五个账号?#!/bin ...

  8. lintcode.46 主元素

    给定一个整型数组,找出主元素,它在数组中的出现次数严格大于数组元素个数的二分之一. 注意事项 You may assume that the array is non-empty and the ma ...

  9. Maven搭建SpringMVC+MyBatis+Json项目(多模块项目)

    一.开发环境 Eclipse:eclipse-jee-luna-SR1a-win32; JDK:jdk-8u121-windows-i586.exe; MySql:MySQL Server 5.5; ...

  10. Markdown编辑器 简单使用

    [TOC] 一号标题 二号标题 三号标题 1 列表 2 列表 3 列表 引用 引用就是实在前面加上> 分割线 分割线就是三个* 目录 目录是[TOC],加在一个文章的最前面 粗体 和斜体 一个之 ...