标签:des android style class blog code
1 var FastRender = new inherit({ 2 3 initialize: function(opts) { 4 this.handleOpts(opts); 5 this.init(); 6 }, 7 8 handleOpts: function(opts) { 9 if (!opts || !opts.doms || !opts.doms.length) throw ‘FastRender param error‘; 10 this.doms = opts.doms; 11 this.container = opts.container || $(window); 12 this.renderContainer = {}; 13 this.step = 50; 14 15 }, 16 17 init: function() { 18 this.initImgContainer(); 19 this.initRender(); 20 this.bindEvents(); 21 }, 22 23 bindEvents: function() { 24 25 //为container绑定事件 26 this.container.on(‘scroll.fastRender‘, $.proxy(function() { 27 this.initRender(); 28 }, 29 this)); 30 }, 31 32 initImgContainer: function() { 33 var el, i, len, offset; 34 for (i = 0, len = this.doms.length; i < len; i++) { 35 el = $(this.doms[i]); 36 offset = el.offset(); 37 38 //这块卡 39 // (function (el) { 40 // setTimeout(function () { 41 el.css({ 42 ‘width‘: offset.width, 43 ‘height‘: offset.height 44 }); 45 // }, 0); 46 // })(el); 47 48 if (!this.renderContainer[offset.top]) { 49 this.renderContainer[offset.top] = []; 50 } 51 this.renderContainer[offset.top].push(el); 52 } 53 54 }, 55 56 /* 57 这里需要对对象遍历做优化,以坐标搜索替换数值搜索 58 59 */ 60 initRender: function() { 61 var height = this.container.height(); 62 var srollHeight = this.container.scrollTop(); 63 var k, _imgs, el, i, len, els; 64 65 this.doms.removeClass(‘wl‘); 66 67 for (k in this.renderContainer) { 68 // if ((parseInt(k) < srollHeight + height + this.step) && (parseInt(k) > srollHeight - this.step)) { 69 if ((parseInt(k) < srollHeight + height - this.step) && (parseInt(k) > srollHeight + this.step)) { 70 71 els = this.renderContainer[k]; 72 for (i = 0, len = els.length; i < len; i++) { 73 el = $(els[i]); 74 el.find(‘.lazy_wrapper‘).show(); 75 } 76 } else { 77 els = this.renderContainer[k]; 78 for (i = 0, len = els.length; i < len; i++) { 79 el = $(els[i]); 80 el.find(‘.lazy_wrapper‘).hide(); 81 } 82 83 } 84 } // for 85 86 }, 87 88 destroy: function() { 89 //为container绑定事件 90 this.container.off(‘.fastRender‘); 91 } 92 93 }); 94 95 var f = new FastRender({ 96 doms: $(‘.js_hotel_detail‘) 97 });
这个demo想法很美好,若是可实现的话,无疑是移动端一大功臣,事实上是
浏览器:10分
IOS(4000):6分
android小米(1800):5分
化为4核:4分(1800)
其表现在浏览器上很好,手机上便不行了,所以今日的论证失败,该方案还需优化
这个结果其实可以预见,在渲染上手机根本跟不上,所以平滑度就跟不上,方案抛弃
换个方向想,若是可以绕过DOM树过多问题也是可取,比如移动时候直接以一个白页做动画,这个方案比较可耻
另一个方案是使用cavas为本页面生成一个缩略图,每次移动实际上是缩略图,如此动画是顺畅了,但是此方案甚难,还可能引起其它问题,此方案我得再做验证
结局并不美好,此问题我未找到很好的解决方案,移动端的动画还有很长的路要走......
标签:des android style class blog code
原文地址:http://www.cnblogs.com/yexiaochai/p/3791530.html