jQuery图片延迟加载插件jQuery.lazyload
使用方法
引用jquery和jquery.lazyload.js到你的页面
|
1
2
|
<script src="jquery-1.11.0.min.js"></script>
<script src="jquery.lazyload.js?v=1.9.1"></script>
|
html图片调用方法
为图片加入样式lazy 图片路径引用方法用data-original
|
1
2
3
4
5
6
|
<img class="lazy" data-original="img/bmw_m1_hood.jpg">
<img class="lazy" data-original="img/bmw_m1_side.jpg">
<img class="lazy" data-original="img/viper_1.jpg">
<img class="lazy" data-original="img/viper_corner.jpg">
<img class="lazy" data-original="img/bmw_m3_gt.jpg">
<img class="lazy" data-original="img/corvette_pitstop.jpg">
|
js出始化lazyload并设置图片显示方式
|
1
2
3
4
5
|
<script type="text/javascript" charset="utf-8">
$(function() {
$("img.lazy").lazyload({effect: "fadeIn"});
});
</script>
|
在图片中也可以不使用 class="lazy"，初始化时使用：
|
1
|
$("img").lazyload({effect: "fadeIn"});
|
这样就可以对全局的图片都有效！
=======以下代码由 聆锾沐雨 提供=========
如果想提载入图片，可以使用 threshold 进行设置，
|
1
|
$("img.lazy").lazyload({ threshold :180});
|
以上实例的含义是：在图片距离屏幕180px时提前载入：
========以下内容由 ?Ｄ丶мемοяy 提供===============
引入
|
1
2
|
<script src="jquery-1.11.0.min.js"></script>
<script src="jquery.lazyload.js?v=1.9.1"></script>
|
路径依据实际目录来确定。
|
1
2
3
4
5
|
<script type="text/javascript" charset="utf-8">
$(function() {
$("img.lazy").lazyload({effect: "fadeIn"});
});
</script>
|
图片引用lazyload 方式
|
1
|
<img class="lazy" data-original="img/bmw_m1_hood.jpg" />
|
参数设置
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
$("img.lazy").lazyload({
placeholder : "img/grey.gif", //用图片提前占位
// placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏
effect: "fadeIn", // 载入使用何种效果
// effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
threshold: 200, // 提前开始加载
// threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉
event: 'click', // 事件触发时才加载
// event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…
container: $("#container"), // 对某容器中的图片实现效果
// container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片
failurelimit : 10 // 图片排序混乱时
// failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.
});
|
jQuery图片延迟加载插件jQuery.lazyload相关推荐
- jQuery图片切换插件jquery.cycle.js
Cycle是一个很棒的jQuery图片切换插件,提供了非常好的功能来帮助大家更简单的使用插件的幻灯功能 下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后. <he ...
- jquery图片延迟加载 lazy-src
http://tanglangrong2010.blog.163.com/blog/static/174796716201211282555345/ 目前,主要的购物网站都采用了这种加载方式.今天在一 ...
- jquery 图片裁剪 java_[Java教程]5 款最新的 jQuery 图片裁剪插件
[Java教程]5 款最新的 jQuery 图片裁剪插件 0 2015-05-18 16:00:20 这篇文章主要介绍最新的 5 款 jQuery 图片裁剪插件,可以帮助你轻松的实现你网站需要的图像裁 ...
- 十个jQuery图片画廊插件推荐
2019独角兽企业重金招聘Python工程师标准>>> jQuery的画廊插件可以将分组图像和多媒体资料转成类似Flash的图像或照片.当幻灯片已经成为网站的重要组成部分,jQuer ...
- Cropper – 简单的 jQuery 图片裁剪插件
Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...
- 精心挑选的23款美轮美奂的 jQuery 图片特效插件
jQuery是一个非常优秀的 JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,jQuery 最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入各种 ...
- Croppic – 免费开源的 jQuery 图片裁剪插件
Croppic 这款开源的 jQuery 图片裁剪插件能够满足网站开发人员各种不同的使用需要.只需要简单的上传图片,就可以实现你想要的图像缩放和裁剪功能.因为使用了 HTML5 FormData 对 ...
- 推荐几款jquery图片切换插件
一.前言 毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利 ...
- 介绍一个十分好用的JQUERY图片放大镜插件
介绍一个十分好用的JQUERY图片放大镜插件 介绍一个十分好用的JQUERY图片放大镜插件,在很多电子商务网站中,有时在看小图时,往往想再看这个货品的大图, 传统的另外打开一张大图的话,不大COOL, ...
最新文章
- AI老大哥，正在看着你
- linux时间调整为dst,在Linux中禁用夏令时（DST）更改
- anki vector robot入门语音指令大全
- Redis非阻塞I/O多路复用机制
- 上海交大张拳石：神经网络的变量交互可解释性研究
- idea新建类包图标_IntelliJ IDEA 常见文件类型的图标介绍
- linux命令及其使用方法,Linux命令及其使用方法
- C#- XPath教程
- Android设计模式（1）----单例模式
- 得意时别嘚瑟，失意时别灰心
- glew，glfw实现最新的opengl-学习笔记4实现纹理
- samba服务器的设置
- 尚硅谷JDBC笔记（带源码）——了解数据库，看这一篇就够了
- 地图数据下载方法与商业地图下载器介绍
- 免费的文本分析 文本挖掘软件工具（第一部分）
- 推荐一款开源的加解密算法 --- XXTEA
- S7-1200 PLC的常见扩展模块
- mac M1 安装navicat亲测有效
- 连入网络中的计算机必须都是,12计算机网络判断题.doc
- 常规配置中的CAN模块操作