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后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到 ...
随机推荐
- 九、mysql触发器的概念
.所谓触发器,就是指设置好某个表的某个操作(insert ,update ,delete)时候,同时触发的一个操作: 一般用来,比如说删除文章主栏目,那么可以利用触发器删除这个文章栏目下的所有文章 . ...
- 研读代码必须掌握的Eclipse快捷键
1. Ctrl+左键 和F3 这个是大多数人经常用到的,用来查看变量.方法.类的定义跳到光标所在标识符的定义代码.当按执行流程阅读时,F3实现了大部分导航动作. 2 Ctrl+Shift+G在工作空间 ...
- 【BZOJ 2301】[HAOI2011]Problem b
Description 对于给出的n个询问,每次求有多少个数对(x,y),满足a≤x≤b,c≤y≤d,且gcd(x,y) = k,gcd(x,y)函数为x和y的最大公约数. Input 第一行一个整数 ...
- angular service/directive
<html class=" js cssanimations csstransitions" ng-app="phonecatApp" > < ...
- 读书笔记汇总 --- 用Python写网络爬虫
本系列记录并分享:学习利用Python写网络爬虫的过程. 书目信息 Link 书名: 用Python写网络爬虫 作者: [澳]理查德 劳森(Richard Lawson) 原版名称: web scra ...
- 你所不知道的ref
在c#中有个关键字叫ref,它的作用是使参数按引用传递,基本用法如下: class RefExample { static void Method(ref int i) { i = ; } stati ...
- (转)[C++语法] 关键字typedef用法
转自http://www.cnblogs.com/SweetDream/archive/2006/05/10/395921.html C/C++语言中的typedef相信大家已经不陌生,本文对C/C+ ...
- JavaScript与DOM的关系
JavaScript与浏览器的工作 1.浏览器获取并加载你的页面,从上至下解析它的内容. 遇到JavaScript时,浏览器会解析代码,检查它的正确性,然后执行代码. 浏览器还会建立一个HTML页面的 ...
- 使用Flexbox实现CSS竖向居中
竖向居中需要一个父元素和一个子元素合作完成. <div class="flexbox-container"> <div>Blah blah</div& ...
- Notepad++ 右键菜单自定义配置
问:想在右键菜单里面多加几个功能,怎么加,比如区块注释 答:其实notepad++的配置文件存放路径不在自己的软件路径,而存在于 xp:C:\Documents and Settings\Admini ...