JS实现移动端图片延迟加载
图片延迟加载常见的有,jquery.lazyload.js,原生JS实现的echo.js。但是都是必须给图片设置宽高。
因为项目是移动端,而且无法在加载前知道图片的宽高,所以,只好自己写了一个。
既然无法按照高度来计算是否在可视区内加载。那我就按照个数加载,每次加载X张图片,滚动到底部的时候再加载X张。如果图片高度比较小,X张加载后图片没有满屏,那么就再执行一次加载。
Example:http://www.yc.cn/app/commonweal/
使用方法
原生JS:
var lazyPhoto = new lazy(".photo-list img");
或者
var lazyPhoto = new lazy(".photo-list img", {
size: ,
attr: "data-original",
callback: function () {
//console.log("加载完了");
}
});
jQuery、Zepto:
$(".photo-list img").lazy({
size: ,
attr: "data-original",
callback: function () {
//console.log("加载完了");
}
});
20160122更新,添加jQuery、Zepto支持
/**
* lazy.js
* Version: 1.1
* 图片延迟加载
* Created by 赵小磊 on 2016/1/22.
*/ (function ($, window, document, undefined) {
var lazy = function (elem, options) {
var photos = typeof elem == "string" ? document.querySelectorAll(elem) : elem,
len = photos.length,
options = options || {},
size = options.size || ,
attr = options.attr || "data-original",
callback = options.callback || "",
page = ;
function loadPhoto() {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop,
docHeight = document.body.scrollHeight,
winHeight = document.documentElement.clientHeight,
i = ,
sum = ;
if (scrollTop + winHeight >= docHeight - ) {
page++;
sum = size * page;
for (i; i < sum; i++) {
if (i < len) {
var photo = photos[i],
photoSrc = photo.getAttribute(attr);
if (photoSrc) {
photo.src = photoSrc;
photo.removeAttribute(attr);
if (i == sum - ) {
photo.onload = function () {
if (docHeight <= winHeight) {
loadPhoto();
}
}
}
if (callback && i == len - ) {
callback();
}
}
}
}
}
}
window.addEventListener("load", loadPhoto, false);
window.addEventListener("scroll", loadPhoto, false);
window.addEventListener("touchmove", loadPhoto, false);
};
window.lazy = lazy;
if (typeof $ != "undefined") {
$.fn.lazy = function(options) {
return lazy(this, options);
};
}
})(window.jQuery || window.Zepto, window, document);
2016/1/15上传1.0
/**
* lazy.js
* 图片延迟加载
* Created by 赵小磊 on 2016/1/15.
*/ (function (window, document) {
var lazy = function (elem, options) {
var photos = typeof elem == "string" ? document.querySelectorAll(elem) : elem,
len = photos.length,
options = options || {},
size = options.size || ,
attr = options.attr || "data-original",
callback = options.callback || "",
page = ;
function loadPhoto() {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop,
docHeight = document.body.scrollHeight,
winHeight = document.documentElement.clientHeight,
i = ,
sum = ;
if (scrollTop + winHeight >= docHeight - ) {
page++;
sum = size * page;
for (i; i < sum; i++) {
if (i < len) {
var photo = photos[i],
photoSrc = photo.getAttribute(attr);
if (photoSrc) {
photo.src = photoSrc;
photo.removeAttribute(attr);
if (i == sum - ) {
photo.onload = function () {
if (docHeight <= winHeight) {
loadPhoto();
}
}
}
if (callback && i == len - ) {
callback();
}
}
}
}
}
}
window.addEventListener("load", loadPhoto, false);
window.addEventListener("scroll", loadPhoto, false);
window.addEventListener("touchmove", loadPhoto, false);
};
window.lazy = lazy;
})(window, document);
JS实现移动端图片延迟加载的更多相关文章
- js实现移动端图片预览:手势缩放, 手势拖动,双击放大...
.katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...
- Js 之移动端图片上传插件mbUploadify
一.下载 https://pan.baidu.com/s/1NEL4tkHoK4ydqdMi_hgWcw 提取码:vx7e 二.Demo示例 <div class="weui_uplo ...
- 纯原生js移动端图片压缩上传插件
前段时间,同事又来咨询一个问题了,说手机端动不动拍照就好几M高清大图,上传服务器太慢,问问我有没有可以压缩图片并上传的js插件,当然手头上没有,别慌,我去网上搜一搜. 结果呢,呵呵...诶~又全是基于 ...
- 图片延迟加载(用jq自己写的方法)
$(function() { $("img.lazy").attr("src","2.jpg"); show(); $(window).sc ...
- 第一次自己写jquery图片延迟加载插件,不通用,但修改一下还是可以使用到很多页面上的
不断修改完善中…… /*! * jquery.lazyoading.js *自定义的页面图片延迟加载插件,比网上的jquery.lazyload简单,也更适合自己的网站 *使用方法: 把img 的cl ...
- Echo.js – 简单易用的 JavaScript 图片延迟加载插件
Echo.js 是一个独立的延迟加载图片的 JavaScript 插件.Echo.js 不依赖第三方库,压缩后不到1KB大小. 延迟加载是提高网页首屏显示速度的一种很有效的方法,当图片元素进入窗口可视 ...
- js图片延迟加载
什么是图片延迟加载? 也叫懒加载. 当页面有多屏的时候,页面中的图片比较多. 那么,在页面载入完毕的时候,并不会把所有的图片都加载进来. 而是当用户拖动滚动条的时候,图片要进入用户的视野了,才开始加载 ...
- 前端优化之图片延迟加载(lazyload.js)
要想缩短首屏加载时间,思路一般是减少http请求次数和降低每次的请求量.本文中使用现成的lazyload.js插件,文末会放出下载地址. lazyload.js可以实现图片分批次加载,不是一次性加载完 ...
- JS图片延迟加载分析及简单的demo
JS图片延迟加载 图片延迟加载也称 "懒加载",通常应用于图片比较多的网页,比如 "美丽说首页","蘑菇街"等一些导购网站上用的比较多,或者 ...
随机推荐
- Dynamic CRM 2013学习笔记(十九)自定义审批流1 - 效果演示
CRM的项目,审批流是一个必须品.为了更方便灵活地使用.配置审批流,我们自定义了一整套审批流.首先来看下它的效果: 1. 审批模板 这是一个最简单的审批流,首先指定审批实体,及相关字段,再配置流程节点 ...
- 虚拟机Ubuntu14/15启用root用户登录
1. 为root用户设置密码 sudo passwd root 需要先输入一次当前用户的登陆密码,然后输入两次root用户的密码(自己设置). 2. 切换至root用户 sudo -s 3. 编辑登陆 ...
- Asp.Net Web API 2第四课——HttpClient消息处理器
Asp.Net Web API 导航 Asp.Net Web API第一课:入门http://www.cnblogs.com/aehyok/p/3432158.html Asp.Net Web A ...
- 新手容易混乱的String+和StringBuffer,以及Java的方法参数传递方式。
之前在交流群里和猿友们讨论string+和stringbuffer哪个速度快以及Java的方法参数传递的问题,引起了群里猿友的小讨论.最终LZ得出的结果是string+没有stringbuffer快, ...
- [MFC] MFC 仿 Flappy bird PC桌面版
http://www.cr173.com/ 前些日子发现朋友都在玩flappy bird这款虐心的小游戏,网上也炒得很火,于是俺也想下一个玩玩.可是矮穷挫至今还没配上高端的智能机,于是去网上搜了一下, ...
- 【Java】Lucene检索引擎详解
基于Java的全文索引/检索引擎——Lucene Lucene不是一个完整的全文索引应用,而是是一个用Java写的全文索引引擎工具包,它可以方便的嵌入到各种应用中实现针对应用的全文索引/检索功能. L ...
- Atitit.mvc的趋势与未来attilax总结
Atitit.mvc的趋势与未来attilax总结 1. Mvc的分类 (服务端mvc vs客户端mvc)1 2. Mvc的趋势,从服务端mvc正在转向客户端mvc1 2.1. 更加完善的分离..h ...
- GUID全局唯一标识符相关知识了解
全局唯一标识符(GUID,Globally Unique Identifier)是一种由算法生成的二进制长度为128位的数字标识符.GUID主要用于在拥有多个节点.多台计算机的网络或系统中.在理想情 ...
- SQLite数据库增删改查操作
一.使用嵌入式关系型SQLite数据库存储数据 在Android平台上,集成了一个嵌入式关系型数据库——SQLite,SQLite3支持NULL.INTEGER.REAL(浮点数字).TEXT(字符串 ...
- Leetcode-237 Delete Node in a Linked List
#237. Delete Node in a Linked List Write a function to delete a node (except the tail) in a singl ...