功能:
- 支持
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: 100, 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
,之前的文章有提到过。
相关推荐
zepto-Cookie-master
js代码 [removed][removed] [removed][removed] [removed] var ty=new tuya({ Base64ck:function (data) { console.log(data) } }); [removed]
这是一个拘于html5手机网页的开发,里面有带手机网页开发插件,以及针对页面的自适应,和字体大小的自适应。采用的是轻量级的手机网页开发插件zepto进行封装,还有控制图片懒加载的脚本插件
zepto 的懒加载
zepto.js 处理Touch事件 处理Touch事件能让你了解到用户的每一根手指的位置,在touch事件触发的时候产生,可以通过touch event handler的event对象取到,如果基于zepto.js开发,一般是通过event.touches[0]来获取属性...
zepto-seajs-calendarseajs模块的日历控件主要实现: _getTds: function(y, m) { // 日历主体部分 var date = new Date(y, m, 1); // 获取当月第一天星期几 var fday = date.getDay(); date = new Date(y, m + 1, 0)...
zepto-event-fixedZepto 事件模块完善
zepto-project-weui 一个webpack构建的zepto项目 项目初始化步骤 # 安装nodejs环境 # 全局安装webpack 命令: (sudo) npm install -g webpack@3 # 全局安装webpack-dev-server 命令: (sudo) npm install -g webpack...
zepto-ui-demo 基于zepto开发的js 移动端常用 ui 插件 案例(demo) 用node 将本地服务 跑起来之后,请用 手机扫描生成的 二维码进行移动端预览 # 下载依赖 npm install # 本地运行 npm run dev
npm install --save zepto-refresh 直接HTML♡ [removed][removed] [removed][removed] 使用 NPM var Refresh = require('zepto-refresh'); Refresh('.wrap', { // 内容元素 contentEl: '#J_scroller', // ...
node了一个,包含模块:zepto event ajax form fx assets data selector touch
______ ______ ______ ______ ______ ...Zepto-carousel.js 一个 Zepto.js 插件,用于为您的网站创建图像轮播。 这个轮播只是让第一个元素淡入,保持几秒钟,然后使用 css3 动画转换为不透明度淡
移动Zepto-Slide 只是另一个zepto滑块:))
在此演示中,我使用了: 加载模块从ES2015 transpile 填充Zepto而不接触源代码指示$ npm install$ npm start # run a server to prove that there are no bugs$ npm run build # create a compressed build好处要...
zepto-touchSlider 用法及Demo请查看 横向: 纵向:
使用此存储库中包含的Zepto.js插件(zepto-grid.js)生成多列布局。 这种布局允许将容器分组为12列的网格,可以按需要以任意组合使用它们,而无需使用以外的任何其他依赖。 原料药 功能 手术 .asRow() 所选项目是...
zepto.slitslider.js A slitslider remake using Zepto.js same with . Required files: 1.zepto.js 2.zepto.fx.js =================== zepto版本的 。 默认参数,改变其中的参数可以制作各种转场效果。 { ...
Zepto滑动插件 注意:已弃用,请改用 。 经过测试 Android 2.3.5(中兴Q101T) Android 4.0.3(Coolpad 8076D) Android 4.2.2(Sony S36h) Android 4.4.2(三星GT-N7100) iOS 8.0(iPad) Windows Phone ...
安装要与Bower一起使用,只需在终端中运行bower install zepto-full 。建造可以通过检出Zepto源代码来构建此shim,然后在该目录的根目录内运行以下命令: setenv MODULES ' zepto event ajax form ie detect fx fx_...
zepto8-源码.rar