图片懒加载插件lazyload.js详解
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<SCRIPT src="jquery.js" type=text/javascript></SCRIPT>
<SCRIPT src="jquery.lazyload.js" type=text/javascript></SCRIPT>
<script type="text/javascript" charset="utf-8">
$(function() {
$("img").lazyload({
placeholder : "images/loading.gif",
effect: "fadeIn"
});
});
</script>
<style>
img a,img{border:0px;}
div{ margin-bottom:10px;}
</style>
</head>
<body>
<img src="data:images/0.jpg" /><br />
<div><a href="#"><img src="data:images/loading.gif" data-original="images/1.jpg"></a></div>
<div><a href="#"><img src="data:images/loading.gif" data-original="images/2.jpg"></a></div>
<div><a href="#"><img src="data:images/loading.gif" data-original="images/3.jpg"></a></div>
<div><a href="#"><img src="data:images/loading.gif" data-original="images/4.jpg"></a></div>
<div><a href="#"><img src="data:images/loading.gif" data-original="images/5.jpg"></a></div>
<div><a href="#"><img src="data:images/loading.gif" data-original="images/6.jpg"></a></div>
<div><a href="#"><img src="data:images/loading.gif" data-original="images/7.jpg"></a></div>
<div><a href="#"><img src="data:images/loading.gif" data-original="images/8.jpg"></a></div>
<div><a href="#"><img src="data:images/loading.gif" data-original="images/9.jpg"></a></div>
<div><a href="#"><img src="data:images/loading.gif" data-original="images/10.jpg"></a></div>
</body>
</html>
注意：必须设置图片的高度或者宽度，否则插件可能无法正常工作
提前加载——Threshold
lazyload默认是当滚动到该图片位置时，加载该图片。但是可以通过设置Threshold参数来实现滚到距离其20px时就加载。
$(function(){
$("img.lazy").lazyload({
threshold :20
});
})
事件触发——Event
当触发定义的事件时，图片才开始加载
$(function(){
$("img.lazy").lazyload({
event : "click"
});
})
你可以使用这个来实现图片的延迟加载
$(function() {
$("img.lazy").lazyload({
event : "sporty"
});
});
$(window).bind("load", function() {
var timeout = setTimeout(function() {
$("img.lazy").trigger("sporty")
}, 5000);
});
上面的代码在页面加载完毕后五秒才开始加载图片
设定效果——Effects
插件默认的加载效果是 show() ,你可以使用任何你想要的效果。下面的代码使用了 fadeIn()
$("img.lazy").lazyload({
effect : "fadeIn"
});
滚动容器内的图片——container
插件也可以使用在滚动容器内的图片上。下面的div拥有scrollerbar，内容的内容进行滚动，滚到图片位置时，图片开始加载
<div style="height:600px;overflow:scroll" id="container">
<img class="lazy" data-original="img/example.jpg" alt="" style="margin-top:1000px" height="200">
</div>
<script>
$(function(){
$("img.lazy").lazyload({
container: $("#container")
});
})
</script>
不顺序排列的图片
- 插件会执行一个寻找未加载图片的循坏，该循环会检查图片是否可见，默认情况下，当第一个视图外的图片被找到，循环就会停止 。
- 但是存在一种情况：页面布局图片的顺序和html图片代码的顺序不一致;它会导致本该加载的没有加载。这种情况下就可以将 failurelimit 设为 10 ，它令插件找到 10 个不在可见区域的图片是才停止搜索. 如果你有一个恶心的布局, 请把这个参数设高一点。
代码：
$("img.lazy").lazyload({
failure_limit : 10
});
处理隐藏图片——skip_invisible
为了提升性能，插件默认忽略隐藏的图片；如果想要加载隐藏图片.设置skip_invisible为false;
注意：Webkit浏览器将自动把没有宽度和高度的图像视为不可见
$("img.lazy").lazyload({
skip_invisible : true
});
jquery.lazyload.js的说明：http://www.appelsiini.net/projects/lazyload
下载地址:原版的：https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.js
图片懒加载插件lazyload.js详解的更多相关文章
- 图片懒加载插件lazyload使用方法
图片懒加载插件lazyload使用方法 一.如何使用: Lazy Load 依赖于 jQuery.引入文件 <script type="text/javascript" sr ...
- 图片懒加载插件echo.js——改造
今天做一个列表项需要用到懒加载,搜到网友推荐的echo.js,试用了一下,还不错.除了懒加载,还提供了throttle——节流,即用户快速滑动列表时,很快滑过的项的图片不会加载,只会加载最后停下来的位 ...
- 图片懒加载之lazyload.js插件使用
简介 lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的. 使用 lazyload依赖与jquery.所以先引入jquery和lazyl ...
- jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明
jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明 jquery.lazyload.js是一个用JavaScript编写的jQuery插件.它可以延迟加载长页面中的图片 ...
- Vue图片懒加载插件
图片懒加载是一个很常用的功能,特别是一些电商平台,这对性能优化至关重要.今天就用vue来实现一个图片懒加载的插件. 这篇博客采用"三步走"战略--Vue.use().Vue.dir ...
- JS实现图片懒加载插件
一.前言 我在前几篇博客的记录中,有说自己在做一个图片懒加载的功能,然后巴拉巴拉的遇到哪些问题,结果做完了也没对懒加载这个功能做一些记录,所以这篇文章主要针对我所实现的思路,以及代码做个记录,实现不佳 ...
- Vue图片懒加载之lazyload插件使用
当内容没有加载完的时候,用户体验不是很好,这时候,可以使用lazyload这个插件,提升用户体验,使用方法特别简单易用 一. vue lazyload插件: 插件地址:https://github.c ...
- VUE图片懒加载-vue lazyload插件的简单上手使用（优化版本）
在用VUE做项目开发的过程中,首页用到了懒加载的方法,查找了一些方法,觉得官网写得太复杂,有一篇博客不错(https://www.cnblogs.com/xyyt/p/7650539.html),但是 ...
- Js 之图片懒加载插件
一.PC端(lazyload) 1.引入js文件 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.m ...
随机推荐
- Linux 下 cs8900a 的移植说明
为 cs8900a 建立编译菜单 1. 拷贝到文件 把 cs8900a 的压缩包拷贝到 arm 用户下的 dev_home/localapps/ [arm@localhost localapps]$ ...
- Nand Flash 控制器中的硬件 ECC 介绍
ECC 产生方法 ECC 是用于对存储器之间传送数据正确进行校验的一种算法,分硬件 ECC 和软件 ECC 算法两种,在 S3C2410 的 Nand Flash 控制器中实现了由硬件电路(ECC 生 ...
- 笔记-ubuntu19共享文件夹
这篇文章记录ubuntu和windows共享文件夹的步骤,环境是ubuntu19,两种方法,一种是图形化界面,一种是命令行. 图形化界面 打开文件软件,找到需要分享的文件夹,点击右键-属性-本地网络共 ...
- 记 openSUSE 42.3 升级到Leap 15.0
先将系统的软件更新到最新版本 sudo zypper update 删除42.3的软件源,若有其他数据源,如nginx的,也需要一并删除,可使用zypper lr -d 来查询 sudo zypper ...
- linux 系统优化初始化配置
一.系统优化配置 1.修改yum源 配置国内yum源 阿里云yum源地址 #CentOS 5.x wget -O /etc/yum.repos.d/CentOS-Base.repo http://m ...
- eval()方法与str()方法
eval()方法与str()方法 #_author:Administrator#date:2019/10/31 a={ 'q':{'xxx':3456}}#将一个字典转换成一个字符串a=str(a)p ...
- EazyUI_Datagrid_行内编辑(editor)的combobox下拉框带图片
1.业务需求: 商品的明细列表里面下拉框需要 [图片+文字 ] 显示 2.我们使用的是EazyUI,而我比较懒,不习惯用拼接html来显示列表页面,使用的是eazyui的数据网格(datagrid) ...
- arguments介绍(二)
1.1 将参数从一个函数传递到另一个函数 下面是将参数从一个函数传递到另一个函数的推荐做法. function foo() { bar.apply(this, arguments); } functi ...
- 杂项-公司：SAMSUNG
ylbtech-杂项-公司:SAMSUNG 三星集团是韩国最大的跨国企业集团,同时也是上市企业全球500强,三星集团包括众多的国际下属企业,旗下子公司有:三星电子.三星物产.三星航空.三星人寿保险等, ...
- iOS开发使用UIScrollView随笔
1.scrollview滚动到固定偏移量contenOffset - (void)setContentOffset:(CGPoint)contentOffset animated:(BOOL)anim ...