页面图片懒加载、延迟加载(lazyload)
文档:http://www.h-ui.net/lib/jQuery.lazyload.js.shtml
github地址:https://github.com/jieyou/lazyload
Lazy Load是一个用js编写的jQuery插件,用来实现图片的延迟加载。只有在浏览器可视区域的图片才会被加载,没有滚动到的区域img标签上会有一个占位图片,而真实图片不会被载入。当页面比较长,图片比较多的时候,延迟加载图片可以加快页面加载速度,在某些情况下降低服务器负担。
使用方法
1、lazyload.js依赖jquery或者zepto.js。
引入jquery文件和lazyload.js文件
lazyload.js文件地址:http://lib.h-ui.net/lazyload/1.9.3/lazyload.js
2、将图片的真实路径放在img的data-original属性上。给img标签增加一个自定义的类名如:lazyload,方便js调用。
<img class="lazyload" alt="" width="1000" height="60" data-original="//images.h-ui.net/www/AD-1000x60.gif" />
js调用
$(function() {
$("img.lazyload").lazyload()}
);
相关参数
属性 | 默认值 | 描述 | 备注 |
---|---|---|---|
threshold | 0 | 临界点 | 可以设置>0的数值,让图片距离屏幕一定像素时提前加载。 |
failure_limit | 0 | 当图像不连续时 | 滚动页面的时候, Lazy Load 会循环为加载的图片. 在循环中检测图片是否在可视区域内. 默认情况下在找到第一张不在可见区域的图片时停止循环. 图片被认为是流式分布。特殊布局请设高参数。 |
container | window | 触发可滚动的容器 | 默认是浏览器的滚动条,也就是window。可以自定义带滚动条的 DIV 元素。如:$("#container") |
event | scroll | 设置事件来触发加载 | click、mouseover可自定义事件 |
effect | show | 载入特效 | fadeIn(淡入效果) |
skip_invisible | true | 加载隐藏的图片 | 默认忽略了隐藏图片,可以设置为false加载隐藏图片 |
placeholder | data:image/png;base64,iVBOR…… | 默认的占位图片 | 可以直接把占位的图片路径赋给img的src |
页面图片懒加载、延迟加载(lazyload)的更多相关文章
- 图片懒加载插件lazyload使用方法
图片懒加载插件lazyload使用方法 一.如何使用: Lazy Load 依赖于 jQuery.引入文件 <script type="text/javascript" sr ...
- Vue图片懒加载之lazyload插件使用
当内容没有加载完的时候,用户体验不是很好,这时候,可以使用lazyload这个插件,提升用户体验,使用方法特别简单易用 一. vue lazyload插件: 插件地址:https://github.c ...
- VUE图片懒加载-vue lazyload插件的简单上手使用(优化版本)
在用VUE做项目开发的过程中,首页用到了懒加载的方法,查找了一些方法,觉得官网写得太复杂,有一篇博客不错(https://www.cnblogs.com/xyyt/p/7650539.html),但是 ...
- 带加载进度的Web图片懒加载组件Lazyload
在Web项目中,大量的图片应用会导致页面加载时间过长,浪费不必要的带宽成本,还会影响用户浏览体验. Lazyload 是一个文件大小仅4kb的图片懒加载组件(不依赖其它第三方库),组件会根据用户当前浏 ...
- 图片懒加载插件lazyload.js详解
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- VUE图片懒加载-vue lazyload插件的简单使用
序:vue项目时候,我们要对图片进行懒加载处理,这个开发项目中就不需要自己去写了,因为比较方便使用vue lazyload进行处理,高效率开发 一. vue lazyload插件: 插件地址:http ...
- 图片懒加载之lazyload.js插件使用
简介 lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的. 使用 lazyload依赖与jquery.所以先引入jquery和lazyl ...
- 图片懒加载jquery lazyload
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>& ...
- 图片懒加载 jquery.lazyload
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- 题解 P5320 - [BJOI2019]勘破神机(推式子+第一类斯特林数)
洛谷题面传送门 神仙题(为什么就没能自己想出来呢/zk/zk) 这是我 AC 的第 \(2\times 10^3\) 道题哦 首先考虑 \(m=2\) 的情况,我们首先可以想到一个非常 trivial ...
- python3 excel读、写、修改操作
python3上Excel文件操作的库比较多,新手一开始不知道如何选择合适的库,故整理如下: xlwt: 只能写不能读,只支持python2.3到python2.7版本,只支持xls文件. xlrd ...
- R语言与医学统计图形-【14】ggplot2几何对象之直方密度图
ggplot2绘图系统--几何对象之直方图.密度图 1.直方图 参数. geom_histogram(mapping = , data = , stat = 'bin', #统计变换,概率密度为den ...
- python15正则表达式
------------恢复内容开始------------ python实现实现实现实现 import re #将表达式编译,返回一个对象, pattern = re.compile(r" ...
- No.2 R语言在生物信息中的应用—模式匹配
目的: 1. 计算自定义模序在所有蛋白质的匹配位点和次数 2. 输出超过阈值的蛋白质序列到Hit_sequences.fasta 3. Hit_sequences.fasta中序列用小写字母,匹配用大 ...
- 巩固java第六天
巩固内容: HTML 空元素 没有内容的 HTML 元素被称为空元素.空元素是在开始标签中关闭的. <br> 就是没有关闭标签的空元素(<br> 标签定义换行). 在 XHTM ...
- 日常Java 2021/10/6
声明自定义异常 class zidingyiException extends Exception{}//定义自己的异常类 单继承 public class A {} public class B ...
- act.四级
act的词源是do, 干着或干了的事情也可以叫act.action: doing sth; act: n. action, v. do; activity: busy, energetic, or占据 ...
- Flink(九)【Flink的重启策略】
目录 1.Flink的重启策略 2.重启策略 2.1未开启checkpoint 2.2开启checkpoint 1)不设置重启策略 2)不重启 3)固定延迟重启(默认) 4)失败率重启 3.重启效果演 ...
- ps精修
1.磨皮方法: a,, 添加高斯模糊后,按住alt键新建图层蒙版,设置前景色为白色,用画笔在脸上雀斑的位置涂抹,注意脸轮廓位置不要涂抹.最后添加曲线提亮 b. 添加蒙尘和划痕后,后面上面的一样