[转帖]Mootools源码分析-49 -- Asset

it2022-05-10  59

原帖地址:http://space.flash8.net/space/?uid-18713-action-viewspace-itemid-410355

原作者:我佛山人

 

代码 // 脚本,样式和图片的资源加载 var  Asset  =   new  Hash({     // 脚本资源的加载     javascrīpt:  function (source, properties)    {         // 合并属性项         properties  =  $extend({             // 脚本加载完成后的事件通知             onload: $empty,             // 脚本标签所属的DOM             document: document,             // 约束检查             check: $lambda( true )        }, properties);         // 创建scrīpt Element,指定路径及脚本类型          var  scrīpt  =   new  Element( ' scrīpt ' , { ' src ' : source,  ' type ' ' text/javascrīpt ' });         // 绑定脚本加载后的onload事件          var  load  =  properties.onload.bind(scrīpt), check  =  properties.check, doc  =  properties.document;         // 删除非scrīpt标签的属性          delete  properties.onload;  delete  properties.check;  delete  properties.document;         // 添加事件监听         scrīpt.addEvents({             // 加载完成事件             load: load,             // 加载状态更改事件             readystatechange:  function ()    {                 // 如果状态码为loaded或complete中的一种,表明加载完成                  if  ([ ' loaded ' ' complete ' ].contains( this .readyState))    load();            }             // 设置标签属性         }).setProperties(properties);         // 对Safari的hack处理,需要提供check方法手动检查有否加载完成          if  (Browser.Engine.webkit419)  var  checker  =  ( function ()    {             // 尝试执行check方法,如果出错或检查未加载完成,退出              if  ( ! $ try (check))     return ;             // 清除计时器             $clear(checker);             // 加载完成通知             load();             // 每50毫秒执行一次调用         }).periodical( 50 );         // 插入scrīpt标签到当前文档的头部          return  scrīpt.inject(doc.head);    },     // 样式资源的加载     css:  function (source, properties)    {         // 创建link Element,设置属性并插入到当前文档头部          return   new  Element( ' link ' , $merge({             ' rel ' ' stylesheet ' ' media ' ' screen ' ' type ' ' text/css ' ' href ' : source        }, properties)).inject(document.head);    },     // 图片资源的加载     image:  function (source, properties)    {         // 合并属性         properties  =  $merge({         // 加载完成事件          ' onload ' : $empty,         // 取消加载事件          ' onabort ' : $empty,         // 加载失败事件          ' onerror ' : $empty        }, properties);         // 创建Image对象          var  image  =   new  Image();         // 如果Image对象无法Element化,创建img Element          var  element  =  $(image)  ||   new  Element( ' img ' );         // 遍历处理load,abort和error事件         [ ' load ' ' abort ' ' error ' ].each( function (name)    {             // 为当前事件加上on前缀              var  type  =   ' on '   +  name;             // 从属性集中读取事件              var  event  =  properties[type];             // 删除属性集中的事件成员              delete  properties[type];             // 为image对象绑定事件             image[type]  =   function ()    {                 // 如果对象不存在,退出                  if  ( ! image)  return ;                 // 如果存在父节点                  if  ( ! element.parentNode)    {                     // 设置宽度                     element.width  =  image.width;                     // 设置高度                     element.height  =  image.height;                }                 // 销毁对象及事件                 image  =  image.onload  =  image.onabort  =  image.onerror  =   null ;                 // 延时执行事件                 event.delay( 1 , element, element);                 // 延时触发事件                 element.fireEvent(name, element,  1 );            };        });         // 设置图片路径         image.src  =  element.src  =  source;         // 如果图片加载完成,延时执行onload事件          if  (image  &&  image.complete)    image.onload.delay( 1 );         // 设置img标签属性并返回Element的引用          return  element.setProperties(properties);    },     // 批量图片加载     images:  function (sources, options)    {         // 合并参数         options  =  $merge({             // 图片集加载完成             onComplete: $empty,             // 图片集加载过程             onProgress: $empty        }, options);         // 使source数组化,以兼容只有一个图片时不传数组的情况          if  ( ! sources.push)    sources  =  [sources];         // 图片数组,项类型为Element          var  images  =  [];         // 图片加载数量标记          var  counter  =   0 ;         // 遍历加载         sources.each( function (source)    {             // 使用Asset.image加载(new属多余,可省略)              var  img  =   new  Asset.image(source, {                 // 添加加载完成事件监听,以实现进度通知及加载完成通知                  ' onload ' function ()    {                     // 进度通知,传送当前已加载数及当前图片的顺序索引值                     options.onProgress.call( this , counter, sources.indexOf(source));                     // 计数器加1                     counter ++ ;                     // 如果计数器与source数组长度一致,表明全部加载完成,调用加载完成事件通知                      if  (counter  ==  sources.length) options.onComplete();                }            });             // 加载到数组             images.push(img);        });         // Elements化          return   new  Elements(images);    }});

 

 

转载于:https://www.cnblogs.com/maapaa/articles/mootools-s-49.html

相关资源:MooTools1.4中文PDF手册 MooTools-Core-1.5.1.js

最新回复(0)