本文共 3933 字，大约阅读时间需要 13 分钟。
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.height44 });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 } // for85 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为本页面生成一个缩略图，每次移动实际上是缩略图，如此动画是顺畅了，但是此方案甚难，还可能引起其它问题，此方案我得再做验证
结局并不美好，此问题我未找到很好的解决方案，移动端的动画还有很长的路要走......
本文转自叶小钗博客园博客，原文链接：http://www.cnblogs.com/yexiaochai/p/3791530.html，如需转载请自行联系原作者