动态延迟加载网页元素jQuery插件scrollLoading

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

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

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

（jquery.scrollLoading.js文件下载见页面下方附件）

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.scrollLoading.js"></script>

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

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

看到如上形式，Kurly给大家简单说明一下。该插件的原理是首先给图片的src赋一个临时图片地址，这个图片可以是一个1像素的透明图片（建议设置宽和高），这样，所有需要运用动态加载效果的图片只有在滚动到相应的位置时，该图片的src才会替换成真实的图片地址。注意，我们还要给这些图片添加统一的class，如上是”scrollLoading“以便我们将要对其进行选择并实现我们需要的效果。

从而，浏览器没有到达的区域中的图片都只是加载同一个1像素的图片而已。

如果要给正在载入的图片一个载入的动态效果，我们可以给这个1像素的透明图片添加一个GIF动态载入的背景图片，那样会给人更好的体验。

好了，上面已经加载了必要的两个JS文件，以及我们已经对需要动态加载的图片进行了处理。下面就是调用该插件实现该效果了，很简单，就一句话：

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

转载于:https://www.cnblogs.com/keta/p/6534739.html

动态延迟加载网页元素jQuery插件scrollLoading相关推荐

Lazy Load, 延迟加载图片的 jQuery 插件 - NeoEase
Lazy Load, 延迟加载图片的 jQuery 插件 - NeoEase Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器 ...
比较好玩的动态添加网页元素
比较好玩的动态添加网页元素 javascript 有一些很有趣的功能.下面介绍三样小功能. 1.动态创建按键 2动态创建链接 3动态创建表格效果如下: 源代码如下: <!DOCTYPE htm ...
给动态生成的id标签添加html,比较好玩的动态添加网页元素
比较好玩的动态添加网页元素 javascript 有一些很有趣的功能.下面介绍三样小功能. 1.动态创建按键 2动态创建链接 3动态创建表格效果如下: 源代码如下: function btnClic ...
Lazy Load, 延迟加载图片的 jQuery 插件
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
jquery.lazyload-1.9.3中文文档 -- 延迟加载图片的jQuery插件
最近使用 jquery.lazyload.js 这个jQuery插件的时候, 突然发现对这个插件相对全面的介绍不多. 特别是对lazyload()方法中的配置选项的介绍少之又少. 随即整理一份供大家参 ...
jQuery实用网页元素颜色修改插件
这是一款非常实用的可以在页面滚动或触发其它事件时修改网页元素的背景.前景和边框颜色的jQuery插件.该修改颜色jQuery插件支持各种鼠标事件和页面滚动事件,可以在这些事件触发的时候,平滑的将元素的 ...
（转）jQuery插件:Image lazy loader图片延迟加载
原文地址:http://www.cnblogs.com/cnfiowen/archive/2010/02/22/1671483.html Lazy Load 是一个用 JavaScript 编写的 j ...
JQuery插件制作具有动态效果的网页
JQuery插件制作具有动态效果的网页前言 JQuery 今天我给大家介绍一个运用JQuery插件制作的动态网页--iphone 5C 宣传页面.这个网页中运用到了fullpage.js和 ...
JQuery插件：动态列和无间隙网格布局Mason.js
来源:GBin1.com 在线演示 JavaScript提供很多强有力的方案,解决动态列的网格布局(例如:Pinterest).这些方案很有效,但是,有时候,会造成网格的间隙或粗糙的边缘. Mason ...

动态延迟加载网页元素jQuery插件scrollLoading

动态延迟加载网页元素jQuery插件scrollLoading相关推荐

最新文章

热门文章