荣耀彩票代理

IT技术互动交流平台

前端优化:BigRender

作者:一介良猿  发布日期:2015-01-04 19:34:10

前言

荣耀彩票代理YOUDUIXIANGCAIJIAOKUANIAN,MEIDUIXIANGJIAOAOYE。SUOYI,ZAIZHEIMEIDUIXIANGDEYUANDANJIAQIDEYELIDAONONGLEYIXIAQIANDUANYOUHUADEDONGXI。RUGUONITINGSHUOGUOFaceBook,TAIHAOLE,NIKENDINGSHIGEWANG LUOCHAOREN;RUGUONIHAITINGSHUOGUOFaceBookDEbigpipe,NEIMENIDUOSHUHEWOYIYANGSHIDANSHENITYUAN。HENHAO,NEIMEJINTIANWOJIUSHUOSHUObigrenderBA,NIMEIKANCUO,WO YEMEIXIECUO,WOXIANGJIANGDEJIUSHIbigrender,QIANMIANJIANGDEDOUSHIFEIHUA。

介绍

荣耀彩票代理bigrenderSHIQIANDUANYOUHUADEJISHU,CONGZIMIANSHANGDOUKEYIHENQINGCHUDELIJIEZHEIYIJISHUTEDIAN。big(DA)& render(XUANRAN),RUGUOFANYIBUDUI,QINGMADUNIANG。bigrenderGUMINGSIYISHIDUIDAYEMIANXUANRANDEYOUHUA。bigrenderDEYUANLISHITONGGUOMOUZHONGFANGSHI,JIANGSHOUPINGBUXU YAODEhtmlDAIMAXIANCUNFANGQILAI。XUANRANHAOSHOUPINGHOU,ZAIJIANGCUNCHUHAODEhtmlDAIMAZHUBUXUANRANCHULAI。

效果

荣耀彩票代理XIANKANKANXIAOGUO,XIAMIANDEJIETUSHIMEITUANDEYEMIANDEJIETU,TONGGUOJIETUKEYIKANCHU,SHANGMIANHONGSEKUANGNEIDEJIUSHISHOUPINGDENEIRONG,ZHEIBUFENSHIBEIXUANRANHAODE,XIAMIANLANSEKUANGNEIDEZHISHISHUCHULEGEZHANWEIKUANG,NEIRONGSHIKONGBAIDE,NEIRONGDOUBEIBAOCUNZAIYIGEYINZANGDEtextareaKUANGNEI(JIANTU1)。

荣耀彩票代理SHIYONGbigrenderDEHAOCHUXIANERYIJIAN,JIANSHAODOMJIEDIAN,JIAKUAISHOUPINGDEXUANRAN,TIGAOYONGHUTIYAN,JINYIBUSIKAO,RUGUONIDEYEMIANBUDANZHIDA,HAIYOUHENDUOTUPIANZIYUAN,HAIKEYIYANCHISHOUPINGWAIDETUPIANJIAZAI,TISUSHIGANGGANGDI。

图1

TU1

实现

ZHEIGEYUANDAN,TONGGUOGAIZAOGERENBOKESHIXIANbigrender。RUTU2,MEIGEHONGSEKUANGDOUSHIYIGEarticleBIAOQIAN,BAarticleNEIDEhtmlDOUBAOCUNZAI articleLIMIANYINZANGDEtextarea,articleSHELEYIGEZUIXIAOGAODU(articleXUANRANHOUHUIYICHUZUIXIAOGAODU),MUDESHIBAZHENGGEYEMIANCHENGKAI,JIPINGMUTIANJIA GUNDONGTIAOSHIJIAN,DANGMEIGEarticleCHUXIANKESHIFANWEIDESHIHOUJIUXUANRANtextareaLIMIANDEhtml。

1 <textarea class='br-rendered' style='display:none'>...</textarea>
2 <article class='br-warp' style='min-height: 300px;'>...</article>

bigrender-效果

TU2

bigrender-效果

TU3 XIAOGUO

JSDAIMA

 1 (function($){
 2     $.fn.bigrender = function(opts){
 3 
 4         var winHeight = document.documentElement.clientHeight;
 5         var sum = 0;
 6         var count = 0;
 7         var flash = new Array();
 8        
 9         // 'class' 是textarea父节点的类;'textarea' 是textarea标签的类;'threshold'是距离进入屏幕还有150像素就开始渲染;'remove'是否删除textarea标签       
10         options = $.extend({
11             'class' : '.br-warp',
12             'textarea' : '.br-rendered',
13             'threshold' : 150,
14             'remove' : true,
15         },opts);   
16        
17         $brenders = $(options.class);
18         // 渲染首屏的内容
19         initBigrender();   
20         // 绑定滚动条事件
21         scrollDisplay();
22        
23        
24         // 函数定义
25         function initBigrender(){      
26             $brenders.each(function(n,object){
27                 sum++;
28                 if(isRender($(this))){
29                     display($(this));
30                     count++;
31                     flash[n] = true;
32                 }else{
33                     flash[n] = false;
34                 }
35             });
36         }
37        
38         // 判断时候需要渲染
39         function isRender(object){
40             offsetTop = object.offset().top;
41             ojh = object.outerHeight(true);
42             st = Math.max(document.body.scrollTop || document.documentElement.scrollTop);
43 
44             if(offsetTop+ojh+options.threshold >= st && offsetTop-options.threshold < (st+winHeight)){
45                 return true;
46             }else return false;
47            
48         }
49        
50         // 渲染textarea内的html代码
51         function display(object){
52             $display = object.find(options.textarea).eq(0);
53             if(options.remove){
54                 object.append($display.val());
55                 $display.remove();
56             }else{
57                 object.append($display.val());
58             }
59         }
60        
61         // 屏幕绑定滚动条事件,当待渲染的内容进入可视屏幕就触发isRender函数
62         function scrollDisplay(){
63             $(window).scroll(function() {65                 if(count < sum){
66                     $brenders.each(function(n,object){
67                         if(flash[n] == false){
68                             if(isRender($(this))){
69                                 display($(this));
70                                 count++;
71                                 flash[n] = true;
72                             }75                         }
76                     });
77                 }
78             });    
79         }
80     };
81 })(jQuery);

DIAOYONGFANGSHI

1 $.fn.bigrender({'threshold' : 100});  // 提前100像素开始渲染

XUANRANQIANhtml

<article class='br-warp' style='min-height: 300px;'>
    <textarea class='br-rendered' style='display:none'>     &lt;div class='title'&gt;&lt;a href='http://www.hcoding.com/?p=27' rel='bookmark'&gt;Symfony2目录结构说明&lt;/a&gt;&lt;/div&gt;
        &lt;div class='entry-meta'&gt;&lt;a href='http://www.hcoding.com/?p=27' title='下午4:12' rel='bookmark'&gt;&lt;time class='entry-date' datetime='2014-11-14T16:12:48+00:00'&gt;2014年11月14日&lt;/time&gt;&lt;/a&gt; 分类:&lt;a href='http://www.hcoding.com/?cat=5' rel='category'&gt;PHP&lt;/a&gt;&lt;/div&gt;
        &lt;div class='cover'&gt;&lt;/div&gt;
        &lt;div class='summary'&gt;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;了解框架的目录结构是框架快速入门的一个途径,一个成熟的框架,每个功能模块都被划分存放在不同的目录。在网上找了很多关于Symfony2目录结构,但都是不是很明了,所以,今天在自己看了几个月的Symfony2框架后写下这篇拙文,简明地分析Symfony2框架的目录结构。本文会说明哪些是框架核心包、哪些是第三方插件包、哪些是应用程序包、配置文件存放在哪里等。         &lt;a href='http://www.hcoding.com/?p=27' style='font-size:12px;color:#19b4ed'&gt;阅读全文&lt;/a&gt;
        &lt;/div&gt;
        &lt;div class='tags'&gt;标签:&lt;a href='http://www.hcoding.com/?tag=php' rel='tag'&gt;PHP&lt;/a&gt;、&lt;a href='http://www.hcoding.com/?tag=symfony2' rel='tag'&gt;Symfony2&lt;/a&gt;&lt;/div&gt;
    </textarea>
</article>

XUANRANHOUhtml

<article class='br-warp' style='min-height: 0px;'>
   
        <div class='title'><a href='http://www.hcoding.com/?p=27' rel='bookmark'>Symfony2目录结构说明</a></div>
        <div class='entry-meta'><a href='http://www.hcoding.com/?p=27' title='下午4:12' rel='bookmark'><time class='entry-date' datetime='2014-11-14T16:12:48+00:00'>2014年11月14日</time></a> 分类:<a href='http://www.hcoding.com/?cat=5' rel='category'>PHP</a></div>
        <div class='cover'></div>
        <div class='summary'>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;了解框架的目录结构是框架快速入门的一个途径,一个成熟的框架,每个功能模块都被划分存放在不同的目录。在网上找了很多关于Symfony2目录结构,但都是不是很明了,所以,今天在自己看了几个月的Symfony2框架后写下这篇拙文,简明地分析Symfony2框架的目录结构。本文会说明哪些是框架核心包、哪些是第三方插件包、哪些是应用程序包、配置文件存放在哪里等。         <a href='http://www.hcoding.com/?p=27' style='font-size:12px;color:#19b4ed'>阅读全文</a>
        </div>
        <div class='tags'>标签:<a href='http://www.hcoding.com/?tag=php' rel='tag'>PHP</a>、<a href='http://www.hcoding.com/?tag=symfony2' rel='tag'>Symfony2</a></div>
    </article>

结语

bigrenderTONGGUOJIANSHAODOMJIEDIAN,JIAKUAISHOUPINGDEXUANRAN,DANSHI,TAYESHIYOUEWAIDEXINGNENGSUNHAODE,KEYIKANDAOSHANGMIANXUANRANQIANtextareaLIMIANDEhtmlDAI MA,ZAIFUWUDUANBAhtmlDAIMABAOCUNZAIYINZANGDEtextareaLIMIAN,SUOYIZAIFUWUDUANHUIBAhtmlDAIMAZHUANYI:JIANKUOHAODENGDOUBEIZHUANYILE,ZHEIGEHUIZENGJIAFUWUQIDEYALI;ERQIE, ZHEIGEDEGAIZAOZHISHIQIANDUANDEXUANRAN,FUWUQIYIJIUSHIYICIGUOJISUANSUOYOUDESHUJU,SHUCHUSUOYOUDESHUJU,ZHEIYIDIANMEIYOUDEDAOTIGAO。

 

延伸阅读:

Tag标签:   
  • 专题推荐

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规