如果一个网页很长,那么该页面的加载时间也会相应的较长。而这里给大家介绍的这个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>

动态延迟加载网页元素jQuery插件scrollLoading的更多相关文章

  1. 延迟加载图片的 jQuery 插件:Lazy Load

    网站的速度非常重要,现在有很多网站优化的工具,如 Google 的Page Speed,Yahoo 的 YSlow,对于网页图片,Yahoo 还提供 Smush.it这个工具对图片进行批量压缩,但是对 ...

  2. Lazy Load, 延迟加载图片的 jQuery 插件 - NeoEase

    body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...

  3. Lazy Load, 延迟加载图片的 jQuery 插件.

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

  4. 延迟加载图片的 jQuery 插件——lazyload.js

    lazyload 这个 jQuery 插件,是用来缓冲加载图片的插件.如果一篇文章很长有很多图片的话,下载图片就需要很多时间.而这款插件,会检测你的滚动情况,只有你要看到那个图片的时 候,它才会从后台 ...

  5. 使用jquery日期选择器flatpickr.js,使用js动态创建input元素时插件失效

    最近写页面时需要用到,日期选择器,网上搜索了一些插件,最后使用了flatpickr.js.我是从npm 上拉下的依赖  npm install flatpickr --save 随后在页面中引入css ...

  6. Lazy Load, 延迟加载图片的 jQuery 插件【备忘】

    http://www.neoease.com/lazy-load-jquery-plugin-delay-load-image/ jQuery Unveil – 另一款非常轻量的延迟加载插件 http ...

  7. DOM操作-动态创建网页元素

    动态创建新的DOM元素,是JavaScript操作网页对象模型的重要手段之一 代码: <!DOCTYPE html> <html> <head> <title ...

  8. jQuery插件之-瀑布流插件

    jquery.wookmark.js 一个实现瀑布流自适应宽度布局的jQuery插件—jquery.wookmark.js , wookmark使用非常简单到只需要一句代码就能实现,除此之外,当页面宽 ...

  9. 编写jQuery插件(二)——jQuery插件类型和机制

    jQuery插件类型 jQuery插件主要有3种类型: 1.封装对象方法的插件 这种插件类型是最常见的一种插件,它将对象方法封装起来,对通过选择器获取的jQuery对象进行操作. 2.封装全局函数的插 ...

随机推荐

  1. Linux ssh服务

    关于ssh服务不多说就提几句,1,机房的服务器一般都是通过远程连接登录的,远程登录就必然少不了ssh客户端.2,虚拟机每次都要点击进去,每次退出来也需要按Ctrl+Alt+Enter,也比较麻烦,有时 ...

  2. SDUT1574:组合数的计算

    题目描述 给定n组整数(a,b),计算组合数C(a,b)的值.如C(3,1)=3,C(4,2)=6. 输入 第一行为一个整数n,表示有多少组测试数据.(n <= 100000) 第2-n+1行, ...

  3. MongoDB的分布式部署

    一.分片的概念 分片(sharding)是指根据片键,将数据进行拆分,使其落在不同的机器上的过程.如此一来,不需要功能,配置等强大的机器,也能储存大数据量,处理更高的负载. 二.分片的原理和思想 Mo ...

  4. django连接mongodb mongoengine

    优点 MongoEngine (http://mongoengine.org)1. 提供了和 Django 原生 ORM 几乎一样的一切,功能已经相当强大;2. 用起来比 Django 原生 ORM ...

  5. java中全面的单例模式多种实现方式总结

    单例模式的思想 想整理一些 java 并发相关的知识,不知道从哪开始,想起了单例模式中要考虑的线程安全,就从单例模式开始吧. 以前写过单例模式,这里再重新汇总补充整理一下,单例模式的多种实现. 单例模 ...

  6. 谈面向对象的编程(Python)

    (注:本文部分内容摘自互联网,由于作者水平有限,不足之处,还望留言指正.) 今天中秋节,也没什么特别的,寻常日子依旧. 谈谈面向对象吧,什么叫面向对象? 那么问题来了,你有对象吗?   嗯,,,那我可 ...

  7. Ubuntu16.04双网卡配置,内网外网同时访问

    Ubuntu16.04双网卡配置,内网外网同时访问 配置:vim/etc/network/interface auto lo iface lo inet loopback auto eno1 ifac ...

  8. 20145328 《Java程序设计》第1周学习总结

    20145328 <Java程序设计>第1周学习总结 教材学习内容总结 了解Java基础知识 1995年5月23日,Java诞生,JDK 1.0a2发布 Java约以两年为周期推出重大版本 ...

  9. MYSQL数据库里面的所有密码批量MD5加密

    如果你的字段够长度的话:UPDATE users SET password = MD5(password);如果长度不够,可以先增加长度后再做,或者多建一列,完成后删除原来的列!(如passwd)UP ...

  10. ImportError: No module named Crypto.PublicKey

    答: sudo apt-get install python-pip  (如果没有安装pip的话,需要这一操作) pip install pycrypto