精华内容
下载资源
问答
  • 按需加载

    2015-03-03 22:46:05
    按需加载是前端性能优化中的一项重要措施,按需加载是如何定义的呢?顾名思义,指的是当用户触发了动作时才加载对应的功能。触发的动作,是要看具体的业务场景而言,包括但不限于以下几个情况:鼠标点击、输入文字、...
      按需加载是前端性能优化中的一项重要措施,按需加载是如何定义的呢?顾名思义,指的是当用户触发了动作时才加载对应的功能。触发的动作,是要看具体的业务场景而言,包括但不限于以下几个情况:鼠标点击、输入文字、拉动滚动条,鼠标移动、窗口大小更改等。加载的文件,可以是JS、图片、CSS、HTML等。后面将会详细介绍“按需”的理解。

            按需解析HTML


            现在我们很多时候,看到如图所示,采用<script type="text/template"></script>的js模板,以前一直不懂其中的奇淫技巧,其实呀,他就是防止浏览器初始解析,我们通过触发来解析html,达到按需加载,优化页面的效果。

            按需解析HTML,就是页面一开始不解析HTML,根据需要来解析HTML。解析HTML都是需要一定时间,特别是HTML中包含有img标签、引用了背景图片时,如果一开始就解析,那么势必会增加请求数。常见的有对话框、拉菜单、多标签的内容展示等,这些一开始是不需要解析,可以按需解析。实现按需解析,首先用html 这个标签来对忽略对HTML的解析然后根据触发的动作,把script里面的HTML获取出来,填充到对应的节点中。
            
            示例代码如下:

            我们一起来看下demo,当运行demo并抓包发现:当页面加载结束时,并没有看到图片的请求;当点“点我展示HTML”按钮时,通过抓包发现有图片请求。
    运行代码复制代码保存代码提示:您可以先修改部分代码再运行!power by W3Cfuns.com

            曾经做个demo并经过测试发现,如果是直接解析HTML(不包含有请求CSS图片和img标签),耗费的时间要比用<script type=”text x-template”="">html大约慢1-2倍,如果是还包括请求有CSS图片、img标签,请求连接数将会更多,可见按需解析HTML,对性能提升还是有一定效果。

            按需加载图片

            按需加载图片,就是让图片默认开始不加载,而且在接近可视区域范围时,再进行加载。也称之为懒惰加载。大家都知道,图片一下子全部都加载,请求的次数将会增加,势必影响性能。

            先来看下懒惰加载的实现原理。它的触发动作是:当滚动条拉动到某个位置时,即将进入可视范围的图片需要加载。实现的过程分为下面几个步骤:

            ① 生成<img data-src=”url”>标签时,用data-src来保存图片地址;
            ②记录的图片data-src都保存到数组里;
            ③对滚动条进行事件绑定,假设绑定的函数为function lazyload(){};
            ④在函数lazyload中,按照下面思路实现:计算图片的Y坐标,并计算可视区域的高度height,当Y小于等于(height+ scrollTop)时,图片的src的值用data-src的来替换,从而来实现图片的按需加载;

            下面看一个示例代码:
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title>图片按需加载</title>
    6. </head>
    7. <body>
    8.     <style>
    9.         li {float:left;width:200px;}
    10.     </style>
    11.     <div style="widh:100%;height:1200px;border:1px solid #000">这里是空白的内容,高度为900像素,目的是方便出现滚动条</div>
    12.     <ul style="width:600px;">
    13.         <li> <img width="158" height="158" data-src="http://pic6.nipic.com/20100423/4537140_133035029164_2.jpg"  /> </li>
    14.         <li> <img width="158" height="158" data-src="http://www.jiujiuba.com/xxpict2/picnews/62223245.jpg"  /> </li>
    15.         <li> <img width="158" height="158" data-src="http://www.bz55.com/uploads/allimg/100729/095KS455-0.jpg"  /> </li>
    16.         <li> <img width="158" height="158" data-src="http://www.hyrc.cn/upfile/3/200611/1123539053c7e.jpg"/> </li>
    17.         <li> <img width="158" height="158" data-src="http://www.mjjq.com/blog/photos/Image/mjjq-photos-903.jpg" /> </li>
    18.         <li> <img width="158" height="158" data-src="http://c.cncnimg.cn/000/954/1416_2_b.jpg"  /> </li>
    19.         <li> <img width="158" height="158" data-src="http://www.jiujiuba.com/xxpict2/picnews/62223231.jpg" /> </li>
    20.         <li> <img width="158" height="158" data-src="http://www.mjjq.com/pic/20070530/20070530043314558.jpg" /> </li>
    21.     </ul>
    22.     <script>
    23.         var API = {   
    24.             /**
    25.               * 兼容Mozilla(attachEvent)和IE(addEventListener)的on事件
    26.               * @param {String} element DOM对象 例如:window,li等
    27.               * @param {String} type on事件类型,例如:onclick,onscroll等
    28.               * @param {Function} handler 回调事件
    29.               */
    30.             on: function(element, type, handler) {
    31.                 return element.addEventListener ? element.addEventListener(type, handler, false) : element.attachEvent('on' + type, handler)
    32.             },   
    33.             /**
    34.               * 为对象绑定事件
    35.               * @param {Object} object 对象
    36.               * @param {Function} handler 回调事件
    37.               */
    38.             bind: function(object, handler) {
    39.                 return function() {
    40.                     return handler.apply(object, arguments)
    41.                 }
    42.             },   
    43.             /**
    44.               * 元素在页面中X轴的位置
    45.               * @param {String} element DOM对象 例如:window,li等
    46.               */
    47.             pageX: function(El) {
    48.                 var left = 0;
    49.                  do {
    50.                     left += El.offsetLeft;

    51.                 } while(El.offsetParent && (El = El.offsetParent).nodeName.toUpperCase() != 'BODY');
    52.                 return left;

    53.             },   
    54.             /**
    55.               * 元素在页面中Y轴的位置
    56.               * @param {String} element DOM对象 例如:window,li等
    57.               */
    58.             pageY: function(El) {
    59.                 var top = 0;
    60.                  do {
    61.                     top += El.offsetTop;

    62.                 } while(El.offsetParent && (El = El.offsetParent).nodeName.toUpperCase() != 'BODY');
    63.                 return top;

    64.             },   
    65.             /**
    66.               * 判断图片是否已加载
    67.               * @param {String} element DOM对象 例如:window,li等
    68.               * @param {String} className 样式名称
    69.               * @return {Boolean} 布尔值
    70.               */
    71.             hasClass: function(element, className) {
    72.                 return new RegExp('(^|\\s)' + className + '(<a href="$)').test(element.className">\\s|$)').test(element.className</a>)
    73.             },   
    74.             /**
    75.               * 获取或者设置当前元素的属性值
    76.               * @param {String} element DOM对象 例如:window,li等
    77.               * @param {String} attr 属性
    78.               * @param {String} (value) 属性的值,此参数如果没有那么就是获取属性值,此参数如果存在那么就是设置属性值
    79.               */
    80.             attr: function(element, attr, value) {
    81.                  if (arguments.length == 2) {
    82.                     return element.attributes[attr] ? element.attributes[attr].nodeValue : undefined
    83.                 }
    84.                 else if (arguments.length == 3) {
    85.                     element.setAttribute(attr, value)
    86.                 }
    87.             }
    88.         };

    89.         /**
    90.           * 按需加载
    91.           * @param {String} obj 图片区域元素ID
    92.           */
    93.         function lazyload(obj) {
    94.             this.lazy = typeof obj === 'string' ? document.getElementById(obj) : document.getElementsByTagName('body')[0];
    95.             this.aImg = this.lazy.getElementsByTagName('img');
    96.             this.fnLoad = API.bind(this, this.load);
    97.             this.load();
    98.             API.on(window, 'scroll', this.fnLoad);
    99.             API.on(window, 'resize', this.fnLoad);

    100.         }
    101.         lazyload.prototype = {

    102.             /**
    103.               * 执行按需加载图片,并将已加载的图片标记为已加载
    104.               * @return 无
    105.               */
    106.             load: function() {
    107.                 var iScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    108.                 // 屏幕上边缘
    109.                 var iClientHeight = document.documentElement.clientHeight + iScrollTop;
    110.                 // 屏幕下边缘
    111.                 var i = 0;
    112.                 var aParent = [];
    113.                 var oParent = null;
    114.                 var iTop = 0;
    115.                 var iBottom = 0;
    116.                 var aNotLoaded = this.loaded(0);
    117.                  if (this.loaded(1).length != this.aImg.length) {
    118.                     var notLoadedLen = aNotLoaded.length;
    119.                      for (i = 0; i < notLoadedLen; i++) {
    120.                         iTop = API.pageY(aNotLoaded[i]) - 200;
    121.                         iBottom = API.pageY(aNotLoaded[i]) + aNotLoaded[i].offsetHeight + 200;
    122.                         var isTopArea = (iTop > iScrollTop && iTop < iClientHeight) ? true : false;
    123.                         var isBottomArea = (iBottom > iScrollTop && iBottom < iClientHeight) ? true : false;
    124.                          if (isTopArea || isBottomArea) {                   
    125.                             // 把预存在自定义属性中的真实图片地址赋给src
    126.                             aNotLoaded[i].src = API.attr(aNotLoaded[i], 'data-src') || aNotLoaded[i].src;
    127.                              if (!API.hasClass(aNotLoaded[i], 'loaded')) {
    128.                                  if ('' != aNotLoaded[i].className) {
    129.                                     aNotLoaded[i].className = aNotLoaded[i].className.concat(" loaded");

    130.                                 }
    131.                                 else {
    132.                                     aNotLoaded[i].className = 'loaded';

    133.                                 }
    134.                             }
    135.                         }
    136.                     }
    137.                 }
    138.             },

    139.             /**
    140.               * 已加载或者未加载的图片数组
    141.               * @param {Number} status 图片是否已加载的状态,0代表未加载,1代表已加载
    142.               * @return Array 返回已加载或者未加载的图片数组
    143.               */
    144.             loaded: function(status) {
    145.                 var array = [];
    146.                 var i = 0;
    147.                  for (i = 0; i < this.aImg.length; i++) {
    148.                     var hasClass = API.hasClass(this.aImg[i], 'loaded');
    149.                      if (!status) {
    150.                         if (!hasClass)
    151.                             array.push(this.aImg[i])
    152.                     }
    153.                     if (status) {
    154.                         if (hasClass)
    155.                             array.push(this.aImg[i])
    156.                     }
    157.                 }
    158.                 return array;       
    159.             }
    160.         };
    161.         // 按需加载初始化
    162.         API.on(window, 'load', function () {new lazyload()});
    163.     </script>
    164. </body>
    165. </html>
    复制代码

            运行上述的示例代码,并抓包会发现:一开始并没有看到图片的请求,但当拉动滚动条到页面下面时,将会看到图片发送请求。目前很多框架都已经支持图片的懒惰加载,平时在开发中,大家可以对图片实现懒惰加载,这是有效提升性能的一个方法,特别是网页图片比较多时,更加应该使用该方法。

            按需加载除了上述场景外,还有更多的场景。如下图:

            

            页面一开始,加载的是“全部”标签里面的内容,但在点击“指定商品折扣券”标签时,才去加载对应的图片。实现思路如下:

            ①生成<img data-src=”url”>标签时,用data-src来保存图片地址;
            ②在点击标签事件时,获取所有图片,图片的src的值用data-src的来替换;

            示例代码如下:
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title>标签按需加载</title>
    6. </head>

    7. <body>
    8.     <style>
    9.         ul li {width:200px;height:30px;float:left; list-style:none; text-align:center;}
    10.         .on{border-top:1px solid #3FF;border-left:1px solid #3FF;border-right:1px solid #3FF; }
    11.         .hide{display:none;}
    12.     </style>
    13.     <ul>
    14.         <li>全部</li>
    15.         <li id="viewTsb1" οnclick="showTabContent()">指定商品折扣券</li>
    16.     </ul>
    17.     <div style="width:800px;height:500px;clear:both;">
    18.         <div id="tab1" style="height:25px; line-height:25px; margin:50px 0 0 40px">全部标签应该展示所有内容</div>
    19.         <div id="tab2">
    20.              <img width="158" height="158" data-src="http://img2.114msn.com/jindian/20081071153761308.jpg"  />
    21.              <img width="158" height="158" data-src="http://www.mjjq.com/blog/photos/Image/mjjq-photos-900.jpg"  />
    22.          </div>
    23.     </div>
    24.     <script>
    25.         var isLoadedImg = false;
    26.         function showTabContent(){ 
    27.             if(isLoadedImg){
    28.                 return;
    29.             }
    30.             var elem = document.getElementById("tab2");
    31.             document.getElementById("tab1").className="hide";
    32.             elem.className="";
    33.             var arrImage = elem.getElementsByTagName("img");
    34.             var l = arrImage.length;
    35.             for(var i=0;i<l;i++){
    36.                 arrImage[i].src = arrImage[i].getAttribute('data-src');
    37.             }
    38.             isLoadedImg = true;
    39.             //todo 更改标签状态
    40.         }
    41.     </script>
    42. </body>
    43. </html>
    复制代码

            运行上述代码并抓包并发现:一开始没有看到有图片的请求,但点击“指定商品折扣券”标签时,看到有图片的请求发送。需要注意的是,为了确保体验,首屏的图片不建议懒惰加载,而应该直接展示出来;避免一开始用户就无法看到图片,在IE下看到一个虚线框,这样体验反而不好。

            按需执行JS

            按需执行JS和懒惰加载图片比较类似。当打开网页时,如果等所有JS都加载并执行完毕,再把界面呈现给用户,这样整体上性能会比较慢,体验也不友好。就是当某个动作触发后,再执行相应的JS,以便来渲染界面。按需执行JS,可以应用在下列场景:执行一些耗时比较久的JS代码,或执行JS后,需要加载比较多图片、加载iframe、加载广告等。在一些webapp的应用中,或比较复杂的页面时,更加应该使用这种方法。

            实现思路和按需加载比较类似:

            ① 对滚动条进行事件绑定,假设绑定的函数为function lazyExecuteJS(){};
            ②在函数lazyExecuteJS中,按照下面思路实现:选择一个元素作为参照物,当滚动条即将靠近时该元素位置,开始执行对应的JS,从而实现对界面的渲染;

            示例代码如下(以YUI3框架为例):
            
            首先下载最近封装的异步滚动条加载组件:Y.asyncScrollLoader,然后运行下面的代码(需要把页面和Y.asyncScrollLoader.js 放在同一个目录):
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title>按需执行JS</title>
    6. </head>
    7. <script src="http://yui.yahooapis.com/3.2.0/build/yui/yui-debug.js"></script>
    8. <body>
    9.     <div style="height:1500px"><span style="">向下拖动滚动条,拉到广告条的位置,将会自动加载广告的内容!</span></div>
    10.     <div id="ADContent">这里是广告的内容,将会用JS进行填充</div>
    11.     <script>
    12.         YUI({modules:{'asyncScrollLoader': { 
    13.             fullpath: 'Y.asyncScrollLoader.js', 
    14.                 type: 'js', 
    15.                 requires:['widget'] 
    16.             } 
    17.         }}).use('widget','asyncScrollLoader', "node", function(Y){
    18.             var  loadAD = function(){
    19.                 //这里可以用简单的代码代替,实际项目中,可以执行任何JS代码,如请求CGI,或者广告数据,然后再填充到页面上
    20.                 var html = '<div><img src="http://t2.baidu.com/it/u=2027994158,3223530939&fm=23&gp=0.jpg" alt="" /><span>哈哈,我也是动态加载进来的,可以从html结构或抓包看出\效果哈!</span><\/div>'
    21.                 Y.one('#ADContent').set('innerHTML',html);
    22.             }

    23.             var cfg = { 
    24.                 'elementName' : 'div', 
    25.                 'className'     : 'lazy-load', 
    26.                 'contentAttribute' : '' ,
    27.                 'foldDistance': 10,
    28.                 'obCallback' : {
    29.                     'funName' : loadAD,
    30.                     'argument' : [],
    31.                     'context' : this
    32.                 }
    33.             };

    34.            new Y.asyncScrollLoader(cfg).renderer(); 
    35.         });      
    36.     </script>
    37. </body>
    38. </html>
    复制代码


            运行上述代码并抓包发现:打开页面时,是不没有看到有对应的图片请求,但当滚动条拉到一定位置时,loadAD的函数被执行。

            按需加载JS

            JavaScript无非就是script标签引入页面,但当项目越来越大的时候,单页面引入N个js显然不行,合并为单个文件减少了请求数,但请求的文件体积却很大。这时候比较合理的做法就是按需加载。按需加载和按需执行JS比较类似,只不过要执行的JS变成了固定的“实现加载JS”的代码。按需加载实现的思路如下:

            ①对滚动条进行事件绑定,假设绑定的函数为function lazyLoadJS(){};

            ②在函数lazyLoadJS中,按照下面思路实现:选择一个元素作为参照物,当滚动条即将靠近时该元素位置,开始执行加载对应JS;

            ③在JS加载完毕后,开始执行相应的函数来渲染界面;

            ④在实际项目中,可以根据需要设置一个目标距离,比如还有200像素该元素即将进入可视区域;按需加载JS和按需执行JS比较类似,这里就不再单独提供示例代码了;大家可以在按需执行JS的中示例中,把loadAD函数更改为动态加载JS即可;

            分屏展示

            当一个网页比较长,有好几个屏幕,而且加载了大量的图片、广告等资源文件时,分屏展示,可提升页面性能和用户体验。其实分屏展示也可以从按需加载的的角度来看待,默认是加载第一屏幕的内容,当滚动条拉动即将到达下一个屏幕时,再开始渲染下个屏的内容。换言之,是把图片、背景图片、HTML一起按需加载,一开始不对HTML进行解析,那么背景图、img图片也不会进行加载。

            分屏展示的思路如下:

            ①根据具体业务情况,收集主流最大的分辨率的高度;假设这里是用960px;

            ②按照这个高度进行分屏,依次把下一个屏幕内的HTML用<textarea>HTML</’textarea> 来表示;

            ③为了让页面的高度不变,需要让textarea占据一定的页面空间,也就是让页面出现对应的滚动条;因此需要指定样式visility:hidden,并指定它的高度和宽度。

            ④利用上述讲的按需执行JS,把<textarea>HTML</’textarea>里面的HTML代码提取出来,重新填充到textarea的父节点上,便可实现解析对应HTML,从而实现分屏展示。

            示例代码如下(需要把页面和Y.asyncScrollLoader.js 放在同一个目录):

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title>网页分屏展示</title>
    6. </head>
    7. <style>
    8.     .class2 {
    9.         visibility:hidden;
    10.         widh:100%;
    11.         height:300px;
    12.     }
    13. </style>
    14. <script src="http://yui.yahooapis.com/3.2.0/build/yui/yui-debug.js"></script>
    15. <body>
    16. <div style="height:1500px"><span style="">向下拖动滚动条,美图在下面!</span></div>
    17. <textarea>
    18.     <div>
    19.         <img src="http://travel.shangdu.com/liu/uploads/allimg/090407/1521221.jpg" alt="" /><span style="font-size:16px;color:red;">我是动态加载进来的,可以从html结构或抓包看出效果哈!</span>
    20.     </div>
    21. </textarea>
    22. <div style="height:800px"><span style="">下面继续上美图!</span></div>
    23. <textarea>
    24.     <div>
    25.         <img src="http://download.99sucai.com/upload/images/201006042009245.jpg"  alt="" /><span>哈哈,我也是动态加载进来的,可以从html结构或抓包看出效果哈!</span>
    26.     </div>
    27. </textarea>
    28. <script>
    29. YUI({modules:{'asyncScrollLoader': { 
    30.      fullpath: 'Y.asyncScrollLoader.js', 
    31.      type: 'js', 
    32.      requires:['widget'] 
    33.      } 
    34. }}).use('widget','asyncScrollLoader', "node", function(Y){
    35.      var cfg = { 
    36.         'elementName' : 'textarea', 
    37.         'className'     : 'class2', 
    38.         'contentAttribute' : 'value' ,
    39.         'foldDistance': 10           
    40.     };        
    41.     new Y.asyncScrollLoader(cfg).renderer(); 
    42. });      
    43. </script>
    44. </body>
    45. </html>
    复制代码


            运行上面代码并抓包发现:在默认首屏,并没有去解析textarea里面的代码,但当拉动滚动条到一定位置时,textarea里面的HTML依次被解析,从而实现了网页分屏展示。上述的示例代码,可以在这里下载来查看:示例代码

            使用“按需加载”进行性能优化时,需要合理选择触发的动作。“按需加载”的最大优势在于减少了不必要的资源请求,节省流量,真正实现“按需所取”。但是“按需加载”本身如果使用不当也会影响用户体验,因为“按需加载”的时机在用户触发某动作之后,如果用户的网速比较慢的话,加载脚本或执行脚本可能需要等候较长的时间,而用户则不得不为此付出代价。因此,如果要使用“按需加载”则需要选择正确的触发动作,如果是根据滚动条来触发,可考虑一个目标距离,假设目标距离还有200像素即将进入可视区域,则就开始加载,而不是等到进入了可视区域才加载。以上所讲的各种“按需加载”类型,都可以封装成相应的组件,然后就可以在项目中进行应用。
    展开全文
  • 懒加载,按需加载

    2018-01-29 15:13:44
    懒加载 按需加载 lazyload 原生来写的,全匹配支持懒加载
  • js按需加载

    2016-10-17 10:22:27
    js按需加载
  • 组件库A和B都可以分别用这个插件实现按需加载 场景:组件库A内部引用了组件库B,按需加载组件库A 结果:组件库A实现了按需加载,但其内部引用的组件库B没有实现 疑问:在这种场景下&#...
  • requirejs按需加载RequireJS is a hugely popular JavaScript project right now thanks to what it does: asynchronously load JavaScript files and properly handle their introduction to a namespace ...

    requirejs按需加载

    RequireJS is a hugely popular JavaScript project right now thanks to what it does:  asynchronously load JavaScript files and properly handle their introduction to a namespace flawlessly.  Of course, callbacks are provided which allow you to work with the new code one it has been loaded.  MooTools is a perfect match for RequireJS because of its modular structure.  Let me show you how you can lazy load MooTools classes with the robust RequireJS library.

    由于RequireJS的功能,RequireJS现在是一个非常受欢迎JavaScript项目:异步加载JavaScript文件并正确无误地正确处理它们对名称空间的引入。 当然,提供了回调,使您可以处理已加载的新代码。 MooTools的模块化结构非常适合RequireJS。 让我向您展示如何使用健壮的RequireJS库延迟加载MooTools类。

    抓取并使用RequireJS (Grabbing and Using RequireJS)

    You'll obviously need to download RequireJS from the RequireJS website.  Once the file is in place on your server, place it within the page via the traditional method, a SCRIPT tag:

    您显然需要从RequireJS网站下载RequireJS。 将文件放置在服务器上后,通过传统方法SCRIPT标签将其放置在页面中:

    
    <script src="require.js"></script>
    
    
    

    Now you have the power of async JavaScript loading within the page!

    现在,您可以在页面内加载异步JavaScript!

    在MooTools中使用RequireJS (Using RequireJS with MooTools)

    With RequireJS available, all you need to do is use the require function, passing an array of files and a callback to execute once all of the files have loaded:

    在RequireJS可用的情况下,您所需要做的就是使用require函数,传递一个文件数组和一个回调,以在所有文件加载完毕后执行:

    
    //require ScrollSpy and Roar
    require(['scrollspy.1.2.js','Roar.js'],function(){
    	//callbacks
    });
    
    
    

    Once the classes have been loaded, I can use them!  Check it out:

    一旦加载了类,就可以使用它们了! 看看这个:

    
    // require ScrollSpy and Roar
    require(['scrollspy.1.2.js','Roar.js'],function(){
    	//use them!
    	var roar = new Roar();
    	var spy = new ScrollSpy({
    		onEnter: function() {
    			//....
    		}
    	});
    });
    
    
    

    How about a practical usage?  If an element with a "lazyload" CSS class exists, load LazyLoad and create an instance:

    实际使用情况如何? 如果存在带有“ lazyload” CSS类的元素,请加载LazyLoad并创建一个实例:

    
    //when the DOM is ready
    window.addEvent('domready',function(){
    	//find image to lazyload
    	var scrollspyElements = $$('.lazyload');
    	//if there are images to lazyload...
    	if(scrollspyElements.length) {
    		//require the class and when done...
    		require(['lazyload.js'],function(){
    			//create a LazyLoad instance and use it!
    			new LazyLoad({
    			    range: 200,
    			    image: 'Assets/blank.gif',
    			    elements: $$('.lazyload')
    			});
    		});
    	}
    });
    
    
    

    Not only do you load individual classes with RequireJS, but you can also nest require calls to load MooTools asynchronously! Once MooTools is ready, you can make your checks and load MooTools classes:

    您不仅可以使用RequireJS加载单个类,还可以嵌套require调用以异步加载MooTools! MooTools准备就绪后,您可以进行检查并加载MooTools类:

    
    //load mootools with RequireJS!
    require(['mootools-1.2.4.js'],function() {
    	//when the DOM is ready
    	require.ready(function(){
    		//find image to lazyload
    		var scrollspyElements = $$('.lazyload');
    		//if there are images to lazyload...
    		if(scrollspyElements.length) {
    			//require the class and when done...
    			require(['lazyload.js'],function(){
    				//create a LazyLoad instance and use it!
    				new LazyLoad({
    				    range: 200,
    				    image: 'Assets/blank.gif',
    				    elements: $$('.lazyload')
    				});
    			});
    		}
    	});
    });
    
    
    

    Awesome!  The future of JavaScript is loading components (or even a whole framework) only if you need them!

    太棒了! JavaScript的未来是仅在需要时才加载组件(甚至整个框架)!

    准备好! (require.ready!)

    If you aren't using a JavaScript framework, RequireJS provides a ready method to trigger a function when the DOM is ready!

    如果您不使用JavaScript框架,则RequireJS提供了一个现成的方法来在DOM准备就绪时触发函数!

    
    // require ScrollSpy
    require(['scrollspy.1.2.js','Roar.js'],function(){
    	//use it when the dom is ready!
    	require.ready(function(){
    		//use them!
    		var roar = new Roar();
    		var spy = new ScrollSpy({
    			container: document.id('someDiv'),
    			onEnter: function() {
    				//....
    			}
    		});	
    	});
    });
    
    
    

    This is much like MooTools' domready event and Dojo and jQuery's ready method.

    这很像MooTools的domready事件以及Dojo和jQuery的ready方法。

    RequireJS和其他框架 (RequireJS and Other Frameworks)

    Dojo currently contains its own asynchronous resource loading system but is looking toward the possibility of implementing RequireJS near its 2.0 release.  The RequireJS website also provides detailed instructions on using RequireJS with jQuery.

    Dojo当前包含其自己的异步资源加载系统,但正在展望在其2.0版本附近实现RequireJS的可能性。 RequireJS网站还提供有关在jQuery中使用RequireJS的详细说明。

    翻译自: https://davidwalsh.name/mootools-requirejs

    requirejs按需加载

    展开全文
  • ant-design-vue按需加载的方法: 首先运行安装 npm i babel-plugin-import --dev 在babel.config.js中加入下面代码,如果没加,可能会出现元素有了,但样式没有: plugins: [ [ "import", { libraryName: "ant-...

    ant-design-vue按需加载的方法:

    • 首先运行安装 npm i babel-plugin-import --dev
    • 在babel.config.js中加入下面代码,如果没加,可能会出现元素有了,但样式没有:
    plugins: [
         [
           "import",
           { libraryName: "ant-design-vue", libraryDirectory: "es", style: 'css'}
         ]
       ]
    

    在main.js中引入:

    import { 
      Button, 
      message,
      Layout,
      Icon,
       } from 'ant-design-vue';
    Vue.use(Button);
    Vue.use(message);
    Vue.use(Layout);
    Vue.use(Icon);
    

    在这里插入图片描述
    如果从官网拷贝了一个组件,发现报上面的错误,那就说明没有在main.js引入该组件

    Element UI按需加载的方法:

    • 首先,安装 babel-plugin-component:npm install babel-plugin-component -D
    • 同样在main.js中:
    import {
      Select,
      Button,
      ButtonGroup,
      Table,
     }from 'element-ui';
    Vue.use(Select);
    Vue.use(Button);
    Vue.use(ButtonGroup);
    Vue.use(Table);
    
    • 在.babelrc文件中加入下面内容:
    {
      "presets": [["es2015", { "modules": false }]],
      "plugins": [
        [
          "component",
          {
            "libraryName": "element-ui",
            "styleLibraryName": "theme-chalk"
          }
        ]
      ]
    }
    

    如有写的不好的地方请指正。

    展开全文
  • antd按需加载

    千次阅读 2019-10-22 11:28:05
    如:import { Button } from ‘antd...一,可以通过以下的写法来按需加载组件。 import Button from 'antd/es/button'; import 'antd/es/button/style'; // 或者 antd/es/button/style/css 加载 css 文件 二,可以...

    欢迎关注微信公众号:【 全栈攻略 】

    如:import { Button } from ‘antd’; 的写法是引入了 antd 下所有的模块,这会影响应用的网络性能。

    一,可以通过以下的写法来按需加载组件。

    import Button from 'antd/es/button';
    import 'antd/es/button/style'; // 或者 antd/es/button/style/css 加载 css 文件
    

    二,可以使用 babel-plugin-import 来进行按需加载,加入这个插件后。你可以仍然这么写:

    import { Button } from 'antd';
    

    这时我们需要配置一下 .babelrc 文件

    {
      "plugins": [
        [
          "import",
          {
            "libraryName": "antd",
            "style": "css"
          }
        ]
      ] 
    }
    

    至此,配置完成,我们就不需要全局加载 import 'antd/dist/antd.css';

    PS:未来的你,一定会感谢今天拼命努力的自己!
    展开全文
  • 按需加载报错

    2021-01-06 05:44:12
    <div><p>按照文档操作,按需加载对应组件报错 <code>Cannot read property 'install' of undefined</code></p>该提问来源于开源项目:jdf2e/nutui</p></div>
  • vue按需加载实例详解

    2020-10-16 10:59:23
    在本篇文章里小编给大家整理的是关于vue按需加载实例的相关知识点内容,有需要的朋友们可以学习参考下。
  • 按需加载JS

    2019-09-26 00:33:03
    这时候比较合理的做法就是按需加载按需加载和按需执行JS比较类似,只不过要执行的JS变成了固定的“实现加载JS”的代码。按需加载实现的思路如下: 对滚动条进行事件绑定,假设绑定的函数为functionlazyLoadJS()....
  • vue按需加载

    2021-01-07 17:09:56
    //没有按需加载 component: () => import(/* webpackChunkName: "home" */ '@views/index/Home.vue') //有按需加载 component:resolve => require([/* webpackChunkName: "home" */ '@views/index/Home.vue']...
  • ocLoayLoad是AngularJS的模块按需加载器。一般在小型项目里,首次加载页面就下载好所有的资源没有什么大问题。但是当我们的网站渐渐庞大起来,这样子的加载策略让网速初始化速度变得越来越慢,用户体验不好。二来,...
  • 如果可以按需加载内容。就可以节约更多资源,做更多好的应用。 2:解决方案 用客户端语言来判断用户当前的可视范围,只加载用户可视范围的内容。最主要的是图片。因为文字信息,相对较小,其他多媒体内容相对占用...
  • React Router自己就有一套按需加载解决方案,将代码拆分成多个小包,在浏览过程中实现按需加载; 如过你的项目搭配了webpack打包工具,那么需要在webpack.config.js的output内加上chunkFilename output: { path: ...
  • Antd按需加载

    2020-06-01 16:50:44
    Antd的按需加载(rewired)安装Rewired的模块修改package.js配置文件在根目录创建文件 config-overrides.js引入组件按需加载 安装Rewired的模块 yarn add antd react-app-rewired customize-cra babel-plugin-import...
  • 最近,遇到复杂h5页面开发,为了优化H5首屏加载速度,想到使用按需加载的方式,减少首次加载的JavaScript文件体积,于是将处理过程在这里记录一下,涉及到的主要是以下三点: 使用Webpack如何做按需加载 filename...
  • js异步加载 按需加载

    2020-07-19 20:15:18
    有些工具方法需要按需加载,用到再加载,不用不加载,。  默认正常模式下下,JS是同步加载的,即优先加载JS,只有当JS文件下载完,dom和css才开始加载,当某些时候我们需要JS异步加载,我们可以通过以下方式来设置...
  • Vue 按需加载

    2019-12-03 16:12:06
    Vue按需加载 三种方式:vue异步组件、es提案的import()、webpack的require.ensure() 一、vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载。 这种情况下一个组件生成一个js文件,如果...
  • 本文实例讲述了jQuery实现动态加载(按需加载)javascript文件的方法。分享给大家供大家参考,具体如下: 为了提高网页程序的性能,在很多情况下javascript 是按需加载,而不是全部写在 <head>里面。利用jQuery...
  • 概念(懒加载) 当打包构建应用时,JavaScript包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应...(按需加载) 实现 app.vue router.
  • 本篇文章主要介绍了RequireJS按需加载样式文件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 本篇文章主要介绍了requirejs按需加载angularjs文件实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue路由按需加载

    2019-11-08 14:29:46
    vue路由按需加载 按需加载就是只有我们访问这个路由时才会加载这个js 为什么要按需加载 按照普通的加载方式: router.js ... import Login from '@/views/login' import Welcome from '@/views/welcome' export ...
  • 按需加载 antd 的实现方式:用 create-react-app 创建项目后,如果需要第三方的插件库,需要配置 webpack 配置文件,步骤如下:首先运行 npm run eject 暴露出 webpack 的配置文件,项目对多出 config 和 scripts ...
  • vue 按需加载

    2018-05-25 09:42:00
    修改 router 配置文件,实现按需加载 import()载入相应模块就会按需加载相应模块 ,必须放在箭头函数后面,相当于: function Home(){ return '@/comptents/Home' ; } vue-router会执行function,获取...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,568
精华内容 3,027
关键字:

按需加载