jQuery前端插件以及图片延迟加载
| 插件名称 | 用途 | 插件官网地址 |
|---|---|---|
| fontawsome | CSS图标插件 | http://fontawesome.io |
| easyui | 基于jQuery的用户界面插件集合 | http://www.jeasyui.net |
| jqueryui | 同上 | http://jqueryui.com |
| Amaze ui | 中国首个H5跨屏框架 | http://amazeui.org |
| bootstrap | 同上,应用最广泛,推荐 | http://getbootstrap.com/2.3.2/ |
| bxslider | 一个jQuery插件内容滑块 | http://bxslider.com |
| jquery.lazyload | 图片延迟加载 | http://www.appelsiini.net/projects/lazyload |
bootstrap使用步骤
- 导入CSS
- 导入jQuery(2.0/1.12)
- 导入JS
- bootstrap模板
图片延迟加载
参数:
$(function(){
$('img.lazy').lazyload({
//container: $('.product-list'), // 对指定标签对象内的图片实现效果，表示在此标签中滚动时，触发加载（注意：如果容器未设置height和overfload:auto，那么会默认加载所有图片）
threshold: 100, //当图片顶部距离显示区域还有100像素时，就开始加载
placeholder : "img/grey.gif", // 图片未加载时，占位
effect: "slideDown", // 图片出现的效果，值有show(直接显示),fadeIn(淡入),slideDown(下拉)
effect_speed: 1000, // 效果出现的时间
event: 'scroll', // 滚动滚轮时触发，可以是：click、mouseover等
data_attribute: 'original', // img标签中保存url的自定义属性，默认：data-original
skip_invisible: true, // 是否跳过已经隐藏的图片（display:none）
failure_limit: 2, // 由于延迟加载是根据Dom从上到下执行
// 如果遇到Dom位置在上，但是图片定位在下导致看不到，那么会以为之后的图片不在应用延迟加载
// 此处的failure_limit用于限制如果出现N个【Dom位置在上，但是图片定位在下】才终止
appear: function(){ // 当图片位置刚出现在视图时，触发此事件
$(this).attr('src');
},
load: function(){ // 当图片路径加载之后，触发此事件
$(this).attr('src');
}
});
})
例子:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0 auto;
}
.pg-header{
height: 48px;
background-color: #3b5998;
}
.w{
width: 980px;
margin: 0 auto;
}
.clearfix:after{
clear: both;
content: '.';
visibility: hidden;
height: 0;
display: block;
}
.product-list .item{
float: left;
height: 240px;
width: 184px;
overflow: hidden;
border: 1px solid red;
padding: 5px;
}
.product-list .item .lazy{
height: 200px;
width: 184px;
}
</style>
</head>
<body>
<div class="pg-header"></div>
<div class="pg-body">
<div class="w">
<div class="product-list clearfix">
<div class="item">
<img class="lazy" data-original="img/1.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/2.png" />
</div>
<div class="item">
<img class="lazy" data-original="img/3.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/4.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/5.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/6.png" />
</div>
<div class="item">
<img class="lazy" data-original="img/7.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/8.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/9.png" />
</div>
<div class="item">
<img class="lazy" data-original="img/10.png" />
</div>
<div class="item">
<img class="lazy" data-original="img/11.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/12.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/13.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/14.png" />
</div>
<div class="item">
<img class="lazy" data-original="img/15.png" />
</div>
<div class="item">
<img class="lazy" data-original="img/16.png" />
</div>
<div class="item">
<img class="lazy" data-original="img/17.png" />
</div>
<div class="item">
<img class="lazy" data-original="img/1.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/2.png" />
</div>
<div class="item">
<img class="lazy" data-original="img/3.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/4.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/5.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/6.png" />
</div>
<div class="item">
<img class="lazy" data-original="img/7.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/8.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/9.png" />
</div>
<div class="item">
<img class="lazy" data-original="img/10.png" />
</div>
<div class="item">
<img class="lazy" data-original="img/11.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/12.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/13.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/14.png" />
</div>
<div class="item">
<img class="lazy" data-original="img/15.png" />
</div>
<div class="item">
<img class="lazy" data-original="img/16.png" />
</div>
<div class="item">
<img class="lazy" data-original="img/17.png" />
</div>
<div class="item">
<img class="lazy" data-original="img/1.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/2.png" />
</div>
<div class="item">
<img class="lazy" data-original="img/3.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/4.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/5.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/6.png" />
</div>
<div class="item">
<img class="lazy" data-original="img/7.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/8.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/9.png" />
</div>
<div class="item">
<img class="lazy" data-original="img/10.png" />
</div>
<div class="item">
<img class="lazy" data-original="img/11.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/12.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/13.png"/>
</div>
<div class="item">
<img class="lazy" data-original="img/14.png" />
</div>
<div class="item">
<img class="lazy" data-original="img/15.png" />
</div>
<div class="item">
<img class="lazy" data-original="img/16.png" />
</div>
<div class="item">
<img class="lazy" data-original="img/17.png" />
</div>
</div>
</div>
</div>
<div class="pg-footer"></div>
<script src="js/jquery-1.12.4.js"></script>
<script src="js/jquery.lazyload.js"></script>
<script>
$(function(){
$('img.lazy').lazyload({
//container: $('.product-list'), // 对指定标签对象内的图片实现效果，表示在此标签中滚动时，触发加载（注意：如果容器未设置height和overfload:auto，那么会默认加载所有图片）
threshold: 100, //当图片顶部距离显示区域还有100像素时，就开始加载
placeholder : "img/grey.gif", // 图片未加载时，占位
effect: "slideDown", // 图片出现的效果，值有show(直接显示),fadeIn(淡入),slideDown(下拉)
effect_speed: 1000, // 效果出现的时间
event: 'scroll', // 滚动滚轮时触发，可以是：click、mouseover等
data_attribute: 'original', // img标签中保存url的自定义属性，默认：data-original
skip_invisible: true, // 是否跳过已经隐藏的图片（display:none）
failure_limit: 2, // 由于延迟加载是根据Dom从上到下执行
// 如果遇到Dom位置在上，但是图片定位在下导致看不到，那么会以为之后的图片不在应用延迟加载
// 此处的failure_limit用于限制如果出现N个【Dom位置在上，但是图片定位在下】才终止
appear: function(){ // 当图片位置刚出现在视图时，触发此事件
$(this).attr('src');
},
load: function(){ // 当图片路径加载之后，触发此事件
$(this).attr('src');
}
});
})
</script>
</body>
</html>
jQuery前端插件以及图片延迟加载的更多相关文章
- jquery.lazyload插件实现图片延迟加载
jquery.lazyload是一个实现图片延迟加载的jQuery 插件,它可以延迟加载长页面中的图片.在浏览器可视区域外的图片在初始状态下不会被载入,直到用户将页面滚动到它们所在的位置. 1.引入j ...
- jquery.lazyload插件实现图片延迟加载详解
什么是LazyLoad技术? 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互.尤其是对于高清晰的图片,占了几百K的空间.Lazy Load 是一个用 JavaScript 编写的 ...
- 图片延时加载原理 和 使用jquery实现的一个图片延迟加载插件（含图片延迟加载原理）
图片加载技术分为:图片预加载和图片延时加载. javascript图片预加载和延时加载的区别主要体现在图片传输到客户端的时机上,都是为了提升用户体验的,延时加载又叫懒加载.两种技术的本质:两者的行为是 ...
- 使用jquery插件实现图片延迟加载技术（懒加载）
有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...
- 前端优化之图片延迟加载（lazyload.js）
要想缩短首屏加载时间,思路一般是减少http请求次数和降低每次的请求量.本文中使用现成的lazyload.js插件,文末会放出下载地址. lazyload.js可以实现图片分批次加载,不是一次性加载完 ...
- 使用jquery插件实现图片延迟加载--懒加载技术
原文链接:http://www.cnblogs.com/lei2007/archive/2013/05/31/3110725.html 感谢作者.以下为原文,备忘仅供自己学习. 第一:lazyLoad ...
- 转载：jquery插件实现图片延迟加载（lazyload.js）
转载: http://www.cnblogs.com/tinyphp/archive/2013/04/09/3009385.html
- Uploadify & jQuery.imgAreaSelect 插件实现图片上传裁剪
在网站中需要一个图片上传裁剪的功能,借鉴这篇文章 Ajax+PHP+jQuery图片截图上传 的指点,找到了jquery.imgAreaSelect这个不错插件,能对图片进行自定义区域选择并给出坐标, ...
- jQuery旋转插件jqueryrotate 图片旋转
"jquery.rotate.min.js"是jQuery旋转rotate插件,支持Internet Explorer 6.0+ .Firefox 2.0 .Safari 3 .O ...
随机推荐
- orm多表查询基于双下划线
###########基于双下划线的跨表查询(基于join实现的)############# key: 正向查询按字段,反向查询按表名小写 1.查询python这本书出版社的名字 ret = Book ...
- JDBC-DBUtils工具-[课本293]-ResultSetHander接口的三种实现类的BeanHander/BeanListHander/ScalarHander
---恢复内容开始--- ResultSetHander接口 1.使用BeanHandler()只返回第一行结果集 ,封装到一个对应的JavaBean中 ;eg: User user=(User)bd ...
- tomcat 处理HTTP请求
一.Tomcat是什么?Tomcat是一个Web应用服务器,同时也是一个Servlet/JSP容器.Tomcat作为Servlet容器,负责处理客户端请求,把请求传送给Servlet,并将Servle ...
- Linux运行shell脚本提示No such file or directory错误的解决办法
Linux执行.sh文件,提示No such file or directory的问题: 原因:在windows中写好shell脚本测试正常,但是上传到 Linux 上以脚本方式运行命令时提示No s ...
- 【解题报告】CSP2019-S D1T1 格雷码
题目链接:https://www.luogu.org/problem/P5657 话说这道题怎么是道橙题啊. 基本思路 因为n位格雷码的前2n-1位就是n-1位格雷码前面加了一位‘0’,所以可以把它们 ...
- Bzoj 2282: [Sdoi2011]消防(二分答案)
2282: [Sdoi2011]消防 Time Limit: 10 Sec Memory Limit: 512 MB Description 某个国家有n个城市,这n个城市中任意两个都连通且有唯一一条 ...
- 2017.11.8 Noip2017 考前模拟赛
----------------------------------T1---------------------------------- ——>足球联赛 题目描述 巴蜀中学新一季的足球联赛开 ...
- 【原创】go语言学习（四）流程控制
目录: 1.if else语句块 2.for语句 3.switch语句 if else语句块 1.基本语法 if condition { //do something } if statement; ...
- 1820：【00NOIP提高组】进制转换
#include<bits/stdc++.h>//十分简单(滑稽)的一道模拟题 using namespace std; ]={'A','B','C','D','E','F','G','H ...
- 1卸载ROS
sudo apt-get purge ros-*sudo rm -rf /etc/rosgedit ~/.bashrc 参考: https://blog.csdn.net/xmy306538517/a ...