动画在webapp中的现状
难在何处
动画的挣扎
var FastRender = new inherit({ initialize: function(opts) {
this.handleOpts(opts);
this.init();
}, handleOpts: function(opts) {
if (!opts || !opts.doms || !opts.doms.length) throw 'FastRender param error';
this.doms = opts.doms;
this.container = opts.container || $(window);
this.renderContainer = {};
this.step = 50; }, init: function() {
this.initImgContainer();
this.initRender();
this.bindEvents();
}, bindEvents: function() { //为container绑定事件
this.container.on('scroll.fastRender', $.proxy(function() {
this.initRender();
},
this));
}, initImgContainer: function() {
var el, i, len, offset;
for (i = 0, len = this.doms.length; i < len; i++) {
el = $(this.doms[i]);
offset = el.offset(); //这块卡
// (function (el) {
// setTimeout(function () {
el.css({
'width': offset.width,
'height': offset.height
});
// }, 0);
// })(el); if (!this.renderContainer[offset.top]) {
this.renderContainer[offset.top] = [];
}
this.renderContainer[offset.top].push(el);
} }, /*
这里需要对对象遍历做优化,以坐标搜索替换数值搜索 */
initRender: function() {
var height = this.container.height();
var srollHeight = this.container.scrollTop();
var k, _imgs, el, i, len, els; this.doms.removeClass('wl'); for (k in this.renderContainer) {
// if ((parseInt(k) < srollHeight + height + this.step) && (parseInt(k) > srollHeight - this.step)) {
if ((parseInt(k) < srollHeight + height - this.step) && (parseInt(k) > srollHeight + this.step)) { els = this.renderContainer[k];
for (i = 0, len = els.length; i < len; i++) {
el = $(els[i]);
el.find('.lazy_wrapper').show();
}
} else {
els = this.renderContainer[k];
for (i = 0, len = els.length; i < len; i++) {
el = $(els[i]);
el.find('.lazy_wrapper').hide();
} }
} // for }, destroy: function() {
//为container绑定事件
this.container.off('.fastRender');
} }); var f = new FastRender({
doms: $('.js_hotel_detail')
});
这个demo想法很美好,若是可实现的话,无疑是移动端一大功臣,事实上是
浏览器:10分
IOS(4000):6分
android小米(1800):5分
化为4核:4分(1800)
其表现在浏览器上很好,手机上便不行了,所以今日的论证失败,该方案还需优化
这个结果其实可以预见,在渲染上手机根本跟不上,所以平滑度就跟不上,方案抛弃
换个方向想,若是可以绕过DOM树过多问题也是可取,比如移动时候直接以一个白页做动画,这个方案比较可耻
另一个方案是使用cavas为本页面生成一个缩略图,每次移动实际上是缩略图,如此动画是顺畅了,但是此方案甚难,还可能引起其它问题,此方案我得再做验证
结局
结局并不美好,此问题我未找到很好的解决方案,移动端的动画还有很长的路要走......
动画在webapp中的现状的更多相关文章
- 【HTML5&CSS3进阶04】CSS3动画应该如何在webapp中运用
动画在webapp的现状 webapp模式的网站追求的就是一个体验,是HTML5&CSS3浪潮下的产物,抛开体验不说,webapp模式门槛比较高: 而体验优化的一个重点便是动画,可以说动画是w ...
- WebApp中的页面生命周期及路由管理
最近切换到一个新项目,使用的技术栈是Require+Backbone,鉴于对鞋厂webapp框架的了解,发现这个新项目有些缺陷,主要是单纯依赖Backbone造成的,也就是Backbone的好和坏都在 ...
- tomcat中session在两个webapp中实现共享
现在遇到一个需求就是要求完成简单的单点登录,通过在一个tomcat实例中放置两个webapps应用ROOT应用和CEO应用来完成在ROOT应用登录后,在CEO可以直接使用,而未在ROOT应用登录时,不 ...
- [Swift实际操作]八、实用进阶-(3)闭包在定时任务、动画和线程中的使用实际操作
闭包的使用相当广泛,它是可以在代码中被传递和引用的具有独立功能的模块.双击打开之前创建的空白项目.本文将演示闭包在定时任务.动画和线程中的使用.在左侧的项目导航区,打开视图控制器的代码文件:ViewC ...
- 零元学Expression Blend 4 - Chapter 41 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(中)
原文:零元学Expression Blend 4 - Chapter 41 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(中) 我们接着进行动画MenuBar的制作 接续着上 ...
- 如何在webapp中做出原生的ios下拉菜单效果
github:https://github.com/zhoushengmufc/iosselect webapp模仿ios下拉菜单 html下拉菜单select在安卓和IOS下表现不一样,iossel ...
- tomcat ROOT中的lib和webapp中的lib的作用
相同点:都是用来存放jar包的 不同点:和webapps同个目录下的那个lib文件夹所放的jar包对tomcat 服务器和你的webapp 来说都是可以调用的(这时候假如tomcat和web都依赖某个 ...
- webapp中的meta
<!--开发后删除--> <meta http-equiv="Pragma" name="no-store" /><!--必须联网 ...
- fakeLoader.js-针对WebApp中的 “假”预加载
在做移动端网站的时候,前端有时候需要一些过渡效果,当然我们肯定首先想到肯定是用css3做一个过渡动画,nice,那我给大家一个好用的jQuery插件吧,让你三行代码实现这种过渡动画效果. 1.由于该插 ...
随机推荐
- Uiautomator 2.0之Until类学习小记
1. 状态条件-Uiobject2Condtion 1.1 一个UiObject2Condition代表UiObject2满足某个条件的特定状态,主要用于获取到组件释放处于某种状态. 1.2 简单示例 ...
- js立即执行函数
一.JS立即执行函数的写法 方式1.最前最后加括号 (function(){alert(1);}()); 方式2.function外面加括号 (function(){alert(1);})(); ...
- Iterate Files by Tcltk
Iterate Files by Tcltk eryar@163.com Abstract. Tcl/Tk provide a programming system for developing an ...
- samba服务器安装,共享nginx目录
Samba是一个能让Linux系统应用Microsoft网络通讯协议的软件,类似于win的网上邻居,让windows和linux实现文件共享 1.安装smaba服务 yum install samba ...
- ImageView设置边框的两种方式
转载:http://www.2cto.com/kf/201308/239945.html package cc.testimageviewbounds; import android.os.Bundl ...
- hdu 2222 Keywords Search(AC自动机)
/* 啥也不说了,直接套模板... */ 1 #include<iostream> #include<map> #include<string> #include& ...
- Javascript中关键参数this浅析
自从接触javascript以来,对this参数的理解一直是模棱两可.虽有过深入去理解,但却也总感觉是那种浮于表面,没有完全理清头绪. 但对于this参数,确实会让人产生很多误解.那么this参数到底 ...
- Ubuntu杂记——Ubuntu下Eclipse搭建Maven、SVN环境
正在实习的公司项目是使用Maven+SVN管理的,所以转到Ubuntu下也要靠自己搭环境,自己动手,丰衣足食.步骤有点简略,但还是能理解的. 一.安装JDK7 打开终端(Ctrl+Alt+T),输入 ...
- 【记录】T-SQL 分组排序中取出最新数据
示例 Product 表结构: 示例 Product 表数据: 想要的效果是,以 GroupName 字段分组,取出分组中通过 Sort 降序最新的数据,通过示例数据,可以推算出结果数据的 ID 应该 ...
- Understanding delete
简述 我们都知道无法通过delete关键字针对变量和函数进行操作,而对于显示的对象属性声明却可以进行,这个原因需要深究到js的实现层上去,让我们跟随 Understanding delete 来探究一 ...