如果一个网页很长,那么该页面的加载时间也会相应的较长。而这里给大家介绍的这个jQuery插件scrollLoading的作用则是,对页面元素进行动态加载,通俗的说就是滚到哪就加载到哪,屏幕以下看不见的就不用加载了。这样还可以在一定程度上节省服务器资源。该插件作者的网页将该插件的功能和使用方法描述的非常详细,这里把最一般最普遍的使用情况给大家展现一下。

插件作者:http://www.zhangxinxu.com/

首先我们需要加载jQuery库和本插件js文件。

(jquery.scrollLoading.js文件下载见页面下方附件)

 <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="./js/jquery.scrollLoading.js"></script>

接下来我们对自己想要运用该效果的图片进行一下简单的形式处理。

 <img class="scrollLoading" data-url="真实的图片地址" src="临时图片地址" width="120" height="90"/>

  看到如上形式,给大家简单说明一下。该插件的原理是首先给图片的src赋一个临时图片地址,这个图片可以是一个1像素的透明图片(建议设置宽和高),这样,所有需要运用动态加载效果的图片只有在滚动到相应的位置时,该图片的src才会替换成真实的图片地址。注意,我们还要给这些图片添加统一的class,如上是”scrollLoading“以便我们将要对其进行选择并实现我们需要的效果。从而,浏览器没有到达的区域中的图片都只是加载同一个1像素的图片而已。如果要给正在载入的图片一个载入的动态效果,我们可以给这个1像素的透明图片添加一个GIF动态载入的背景图片,那样会给人更好的体验。 好了,上面已经加载了必要的两个JS文件,以及我们已经对需要动态加载的图片进行了处理。此插件的方法名就是scrollLoading,所以,直接:包装器.scrollLoading();就可以实现滚动加载效果了。如下:

 <script type="text/javascript">
$(".scrollLoading").scrollLoading();
</script>

表示所有class为scrollLoading的元素绑定了滚动加载的方法。

  在HTML5中,以data-开头的自定义属性都是合法的,且地址可以是图片,页面等。所以,我设定了绑定地址的自定义属性为”data-url”,此属性值设为真实的图片(或页面)地址就可以了。例如下面:  

  <img class="scrollLoading" data-url="image/mm/00_00.jpg" src="data:image/pixel.gif" width="630" height="420" style="background:url(image/loading.gif) no-repeat center;" />

会在滚动时加载名为data-url的图片路径。对于常用的图片,还有一点小问题,就是其默认的src图片地址。其src地址不能是真实的图片地址(否则会直接一次性全部加载),也不能是空地址或是坏地址,否则IE浏览器下会出现很惊悚的红叉叉。我的做法是默认链接的是一个1px * 1px的gif透明图片(大小很小),同时可以透出后面加载中gif动画图片,当滚动加载的时候直接把此gif图片替换掉。

scrollLoading是个很简单很小的插件,见下表:

参数 默认 释义
attr data-url 获取元素加载地址的属性名

就这些了。此插件只适用于页面默认滚动条的动态加载。对于内部div之类的滚动加载不支持。根据部分要求,现增加两个可选参数,一个为container表示容器,另一个为callback表示回调。具体参见下表:

参数 默认 释义
attr data-url 获取元素加载地址的属性名
container $(window) 滚动的容器。默认为$(window),也就是默认的网页滚动。
callback $.noop 回调。元素动态加载完毕后执行的回调函数。其中回调函数的上下文this就是当前DOM元素。注意:如果无法获取元素加载地址,则不执行动态加载,但是会触发回调。在某些需求下,您可以缺省url值,仅仅触发回调。

使用方法如下:

 $(".scrollLoading").scrollLoading({
container: $("#zxxMainCon"),
callback: function() {
this.style.border = "3px solid #a0b3d6";
}
});

附件下载:下载

页面滚动图片等元素动态加载插件jquery.scrollLoading.js的更多相关文章

  1. [转]jQuery页面滚动图片等元素动态加载实现

    本文转自:http://www.zhangxinxu.com/wordpress/?p=1259 一.关于滚动显屏加载 常常会有这样子的页面,内容很丰富,页面很长,图片较多.比如说光棍节很疯狂的淘宝商 ...

  2. jQuery页面滚动图片等元素动态加载实现

    一.关于滚动显屏加载 常常会有这样子的页面,内容很丰富,页面很长,图片较多.比如说光棍节很疯狂的淘宝商城页面. 或者是前段时间写血本买了个高档耳机的京东商城页面,或者是新浪微博之类. 这些页面图片数量 ...

  3. jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明

    jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明 jquery.lazyload.js是一个用JavaScript编写的jQuery插件.它可以延迟加载长页面中的图片 ...

  4. jQuery懒加载插件jquery.lazyload.js使用说明实例

    jQuery懒加载插件jquery.lazyload.js使用说明实例很多网站都会用到‘图片懒加载’这种方式对网站进行优化,即延迟加载图片或符合某些条件才开始加载图片.懒加载原理:浏览器会自动对页面中 ...

  5. 懒加载插件- jquery.lazyload.js

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  6. jQuery懒加载插件 – jquery.lazyload.js简单调用

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  7. jQuery懒加载插件 – jquery.lazyload.js

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  8. jQuery延迟加载(懒加载)插件 – jquery.lazyload.js

    引入:<script type="text/javascript" src="${base}/resources/shop/js/jquery.lazyload.j ...

  9. jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

随机推荐

  1. 使用SSD检测框架训练自己的数据

    数据集做好后,训练程序为/examples/ssd/ssd_pascal.py,运行之前,我们需要修改相关路径代码,主要是训练路径的修改和关于自己数据集参数的一些修改. cd /examples/ss ...

  2. 根据图片URL获取图片的尺寸【Swift语言实现】

    import UIKit extension UIImage { /// 获取网络图片尺寸 /// /// - Parameter url: 网络图片链接 /// - Returns: 图片尺寸siz ...

  3. Exp0 Kali安装 Week1

    20165214 2018-2019-2 <网络对抗技术>Exp0 Kali安装 Week1 任务要求 Kali的下载.安装.共享.软件源. 步骤 1.从Kali的官网下载镜像文件.(直接 ...

  4. 马凯军 周强 张季跃《面向对象与程序设计 Java》第十四周学习总结

    实验十四  Swing图形界面组件 实验时间 20178-11-29 一.知识部分 1.模型-视图-控制器模式 模型:储存内容 视图:显示内容 控制器:处理用户输入 2.布局管理 2-1.流布局管理器 ...

  5. IOS 极光推送自定义通知遇到的一些坑

    主要方法: //自定义推送 - (void)networkDidReceiveMessage:(NSNotification *)notification { NSDictionary * userI ...

  6. Android选择多图上传

    大概是这么个效果,类似与微信朋友圈选择图片的效果,如下图所示 首先,图片预览的这个界面我用的是GridView,当然也可以使用GridLayout,根据需求制定行列即可.同时重写适配器实现末尾是添加图 ...

  7. Matlab_spectrogram_短时傅里叶分析_实现与讨论

    在语音与音乐处理过程中,常用到短时傅里叶变换(Short Time Fourier Transformation, STFT).在一些学习路径中,STFT也是学习小波之前的预备知识.本文简单实现了 M ...

  8. centos7部署asp.net core 应用程序

    一.运行环境 1.腾讯云与主机一台 2.操作系统是centos7 3.安装.net core sdk 4.安装node及其pm2(安装过程) rpm -Uvh https://packages.mic ...

  9. sort_gff.py

    import sys infile = sys.argv[1]outfile = sys.argv[2] gff_list = []fh = open(infile)for x in fh:    i ...

  10. pip install -r requirements.txt

    生成文件 pip freeze > requirements.txt pip install --help Usage: pip install [options] <requiremen ...