动态延迟加载网页元素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>
动态延迟加载网页元素jQuery插件scrollLoading的更多相关文章
- 延迟加载图片的 jQuery 插件:Lazy Load
网站的速度非常重要,现在有很多网站优化的工具,如 Google 的Page Speed,Yahoo 的 YSlow,对于网页图片,Yahoo 还提供 Smush.it这个工具对图片进行批量压缩,但是对 ...
- Lazy Load, 延迟加载图片的 jQuery 插件 - NeoEase
body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...
- Lazy Load, 延迟加载图片的 jQuery 插件.
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- 延迟加载图片的 jQuery 插件——lazyload.js
lazyload 这个 jQuery 插件,是用来缓冲加载图片的插件.如果一篇文章很长有很多图片的话,下载图片就需要很多时间.而这款插件,会检测你的滚动情况,只有你要看到那个图片的时 候,它才会从后台 ...
- 使用jquery日期选择器flatpickr.js,使用js动态创建input元素时插件失效
最近写页面时需要用到,日期选择器,网上搜索了一些插件,最后使用了flatpickr.js.我是从npm 上拉下的依赖 npm install flatpickr --save 随后在页面中引入css ...
- Lazy Load, 延迟加载图片的 jQuery 插件【备忘】
http://www.neoease.com/lazy-load-jquery-plugin-delay-load-image/ jQuery Unveil – 另一款非常轻量的延迟加载插件 http ...
- DOM操作-动态创建网页元素
动态创建新的DOM元素,是JavaScript操作网页对象模型的重要手段之一 代码: <!DOCTYPE html> <html> <head> <title ...
- jQuery插件之-瀑布流插件
jquery.wookmark.js 一个实现瀑布流自适应宽度布局的jQuery插件—jquery.wookmark.js , wookmark使用非常简单到只需要一句代码就能实现,除此之外,当页面宽 ...
- 编写jQuery插件(二)——jQuery插件类型和机制
jQuery插件类型 jQuery插件主要有3种类型: 1.封装对象方法的插件 这种插件类型是最常见的一种插件,它将对象方法封装起来,对通过选择器获取的jQuery对象进行操作. 2.封装全局函数的插 ...
随机推荐
- Linux ssh服务
关于ssh服务不多说就提几句,1,机房的服务器一般都是通过远程连接登录的,远程登录就必然少不了ssh客户端.2,虚拟机每次都要点击进去,每次退出来也需要按Ctrl+Alt+Enter,也比较麻烦,有时 ...
- SDUT1574:组合数的计算
题目描述 给定n组整数(a,b),计算组合数C(a,b)的值.如C(3,1)=3,C(4,2)=6. 输入 第一行为一个整数n,表示有多少组测试数据.(n <= 100000) 第2-n+1行, ...
- MongoDB的分布式部署
一.分片的概念 分片(sharding)是指根据片键,将数据进行拆分,使其落在不同的机器上的过程.如此一来,不需要功能,配置等强大的机器,也能储存大数据量,处理更高的负载. 二.分片的原理和思想 Mo ...
- django连接mongodb mongoengine
优点 MongoEngine (http://mongoengine.org)1. 提供了和 Django 原生 ORM 几乎一样的一切,功能已经相当强大;2. 用起来比 Django 原生 ORM ...
- java中全面的单例模式多种实现方式总结
单例模式的思想 想整理一些 java 并发相关的知识,不知道从哪开始,想起了单例模式中要考虑的线程安全,就从单例模式开始吧. 以前写过单例模式,这里再重新汇总补充整理一下,单例模式的多种实现. 单例模 ...
- 谈面向对象的编程(Python)
(注:本文部分内容摘自互联网,由于作者水平有限,不足之处,还望留言指正.) 今天中秋节,也没什么特别的,寻常日子依旧. 谈谈面向对象吧,什么叫面向对象? 那么问题来了,你有对象吗? 嗯,,,那我可 ...
- Ubuntu16.04双网卡配置,内网外网同时访问
Ubuntu16.04双网卡配置,内网外网同时访问 配置:vim/etc/network/interface auto lo iface lo inet loopback auto eno1 ifac ...
- 20145328 《Java程序设计》第1周学习总结
20145328 <Java程序设计>第1周学习总结 教材学习内容总结 了解Java基础知识 1995年5月23日,Java诞生,JDK 1.0a2发布 Java约以两年为周期推出重大版本 ...
- MYSQL数据库里面的所有密码批量MD5加密
如果你的字段够长度的话:UPDATE users SET password = MD5(password);如果长度不够,可以先增加长度后再做,或者多建一列,完成后删除原来的列!(如passwd)UP ...
- ImportError: No module named Crypto.PublicKey
答: sudo apt-get install python-pip (如果没有安装pip的话,需要这一操作) pip install pycrypto