Zepto picLazyLoad Plugin,图片懒加载的Zepto插件
嗯,学着国外人起名字Zepto picLazyLoad Plugin
确实看起来高大上,其实js代码没几句,而且我每次写js都捉襟见肘,泪奔~~~
图片懒加载有很多js插件,非常著名的属jQuery的Lazy Load了。自己做手机项目上也需要图片懒加载,而且手机上的图片懒加载有两种:一种是普通img
标签的,一种是div
标签(或者其他标签)上加背景图片的。所以就练手写了个支持以上两种情况的Zepto小插件。
功能:
- 支持
img
标签图片懒加载、div
标签(或者其他标签)的背景图片懒加载; - 支持预加载。默认是图片出现在屏幕时开始加载,可以设置
threshold
参数,如threshold:100
,此时图片出现在屏幕之前100px时开始加载; - 背景图片懒加载时,自动添加base64的1*1透明图片做默认背景图。也可以自定义默认背景图,参数为
placeholder
。
使用方法:
引用1.1.3的Zepto(我只测过这个目前最新版),并引用picLazyLoad.js
。→picLazyLoad.js← →picLazyLoad.min.js←
<script src="1.1.3/zepto.min.js"></script>
<script src="1.0/zepto.picLazyLoad.min.js"></script>
在要懒加载的标签上,加类名或者id名,方便调用。在标签上加data-original="original.jpg"
,original.jpg
为实际加载图片路径。如果是img
标签,还需要加src="blank.png"
。blank.png
为默认背景图,建议用base64图。例如:
<img class="test-lazyload" src="blank.png" data-original="original.jpg">
<div class="test-lazyload" data-original="original.jpg"></div>
调用:
$('.test-lazyload').picLazyLoad();
如需加参数:
$('.test-lazyload').picLazyLoad({
threshold: ,
placeholder: 'http://image.yihaodianimg.com/front-homepage/global/images/blank.gif'
});
→示例DEMO←
已知问题:
- iPhone 5S 7.1.1里,所有浏览器,网页滑到下面,刷新网页,不执行
onscroll
方法,获取不到scrolltop
值。导致此时刷新网页,网页下方的图片没有默认加载。
待增加功能:
- 现在是直接显示图片
show
,以后增加fadeIn
图片淡入; - 现在是只能根据窗口懒加载图片,待增加根据容器、tab选项卡等。
小提示:
- 使用背景图片比使用
img
标签懒加载浏览器显示速度要快,不知道是不是后者多了一步替换src
路径操作导致的; - 如果要兼容更多的设备,使用背景图片可以显示更清晰,因为可以设置
background-size
,之前的文章有提到过。
>>原创文章,欢迎转载。转载请注明:转载自西门的后花园,谢谢! >>原文链接地址:http://ons.me/484.html
Zepto picLazyLoad Plugin,图片懒加载的Zepto插件的更多相关文章
- js 函数的多图片懒加载(lazy) 带插件版完整解析
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS实现图片懒加载效果 页面需求 1 ...
- Vue图片懒加载之lazyload插件使用
当内容没有加载完的时候,用户体验不是很好,这时候,可以使用lazyload这个插件,提升用户体验,使用方法特别简单易用 一. vue lazyload插件: 插件地址:https://github.c ...
- VUE图片懒加载-vue lazyload插件的简单上手使用(优化版本)
在用VUE做项目开发的过程中,首页用到了懒加载的方法,查找了一些方法,觉得官网写得太复杂,有一篇博客不错(https://www.cnblogs.com/xyyt/p/7650539.html),但是 ...
- VUE图片懒加载-vue lazyload插件的简单使用
序:vue项目时候,我们要对图片进行懒加载处理,这个开发项目中就不需要自己去写了,因为比较方便使用vue lazyload进行处理,高效率开发 一. vue lazyload插件: 插件地址:http ...
- JS图片懒加载
简介 当页面图片太多时,加载速度就会很慢.尤其是用2G/3G/4G访问页面,不仅页面慢,而且还会用掉很多流量.图片懒加载的原理就是将页面内所有需要加载的图片全部换成一张默认的图片(一般尺寸很小),只有 ...
- [jQuery插件]手写一个图片懒加载实现
教你做图片懒加载插件 那一年 那一年,我还年轻 刚接手一个ASP.NET MVC 的 web 项目, (C#/jQuery/Bootstrap) 并没有做 web 的经验,没有预留学习时间, (作为项 ...
- webapp图片懒加载实现
图片懒加载在webapp上非常流行,应用的很广泛. 实现图片懒加载功能:zepto.picLazyLoad.min.js 引入类库 <script src="1.1.3/zepto.m ...
- 前端实现图片懒加载(lazyload)的两种方式
在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通 ...
- 代码: 两列图片瀑布流(一次后台取数据,图片懒加载。下拉后分批显示图片。图片高度未知,当图片onload后才显示容器)
代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到 ...
随机推荐
- Opencv 的数据结构
opencv的基本数据结构 结构 成员 意义 CvPoint int x,y 图像中的点 CvPoint2D32f float x,y 二维空间中的点 CvPoint3D32f float x,y,z ...
- C语言-创建链表及排序
#include <stdio.h> #define NEWNODE (Node *)malloc(sizeof(Node)) typedef struct mynode{ int num ...
- 【maven项目结构】module 生成独立的jar
生成jar 生成jar的过程会出现以下问题: clean完了之后就会出现以下问题: install [INFO] Scanning for projects... [INFO] [INFO] ---- ...
- 【BZOJ 2654】tree
Description 给你一个无向带权连通图,每条边是黑色或白色.让你求一棵最小权的恰好有need条白色边的生成树. 题目保证有解. Input 第一行V,E,need分别表示点数,边数和需要的白色 ...
- Mac下安装Redis图解教程
去redis官网(http://redis.io/download)自行下载安装包解压缩到本地文件夹,比如放在Mac应用程序文件夹(/Applications/),在终端进入redis文件夹. 需要进 ...
- iOS基本网络请求
常见的网络请求有同步GET, 同步POST, 异步GET, 异步POST. GET请求和POST请求的区别: 1. GET请求的接口会包含参数部分,参数会作为网址的一部分,服务器地址与参数之间通过 ? ...
- 对象工具类 - ObjectUtils.java
对象工具类,提供对象克隆.获取对象属性.类型判断.Map转换对象.对象转Map.设置对象属性等. 源码如下:(点击下载 - ObjectUtils.java .JsonUtils.java .gso ...
- c#用反射原理递归遍历复杂实体对象
之前在网上看到的都是遍历那种比较简单的实体对象,但是如果有实体嵌套,甚至是包含有List<XXInfo>这种属性的时候就没有办法处理了.通过递归遍历的方式可以完成对复杂实体对象的所有属性的 ...
- 3.4 spring- lookup-method 子元素的使用与解析
1. lookup-method的应用: 1.1 子元素lookup-method 似乎不是很常用,但是在某些时候他的确是非常有用的属性,通常我们称它为 "获取器注入" . 引用 ...
- DataGridView 列自适应宽度 设置
代码: Columns[i].AutoSizeMode = DataGridViewAutoSizeColumnMode.AllCells; 或者设置DataGridView的AutoSizeColu ...