由于任务需要,需要自定义dojo中的loading的图片,Dojo从1.5版开始就提供了progressIndicator.setImage()的方法来自定义图片,但是过程中发生了网速导致图片加载失败的情况,以及Chrome中随机性地发生cancel这张图片载入的情况,最终决定从源头下手,查看dojo源代码,自己处理dojo的loader。原生的DoJo 1.9的progressIndicator介绍可以参考这里

dojo progressIndicator

dojo progressIndicator


尝试寻找loader.gif以替换文件,未果,查看网页源代码可以从上图中可以看到dojo默认的loader并非图片,终于明白它是用html和css用代码画出来的,相关文件为ProgressIndicator.css。

了解到这些之后,先去W3C里把CSS3的知识过了一遍,大概明白了这个图片dojo是怎么画出来的。为了贪图省力,依照图中的div结构,不改变class的结构画出自己想要的图形后再利用progressIndicator中start方法让图片“动”起来,如果你有对div进行改动的话要对应在ProgressIndicator.js的buildRendering方法中做相应的调整。

另外,如果改了图片以后可能不再是正方形的loader了,progressIndicator中有个scale方法会设置loader的大小,默认是40px,要么重写这个方法来设置新loader的长与宽,要偷懒的话注释掉buildRendering的this.scale(size);即可,但是同时自定义loader大小的功能会消失,当然如果有需要可以对此功能进行自定义。

比如这就是一个小demo:



 

 

 

这是官方的说明:http://dojotoolkit.org/reference-guide/1.10/dojox/mobile/ProgressIndicator.html 可以参考。

2014.8.8更新:
由于某些原因使我不能使用dojo包来做这个loader,于是想到了CSS3可以实现动画的内容,于是找到W3C里面介绍CSS3动画的部分,倒腾了一个基于CSS3从而舍去了庞大的dojo包的loader,至此所有由于loader引起的问题全部完美解决。如下:

This is a loader 2.

 

 

 
 

除非注明,电脑·生活文章均为原创,转载请以链接形式标明本文地址
本文地址:http://www.wangjie.name/update-dojo-loader.html


3 Comments

  1. Jo
    Posted 2014 年 8 月 3 日 at 上午 3:11 | Permalink

    做这个小demo还真不容易啊~ :lol:

  2. Posted 2014 年 8 月 3 日 at 上午 7:06 | Permalink

    DEMO不好弄

  3. Posted 2015 年 12 月 7 日 at 下午 4:35 | Permalink

    ^_^ 謝謝分享哦!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

^_^ :yawn: :wq: :wink: :trap: :spit: :sleepy: :shy: :roll: :righthh: :poor: :pig: :panic: :oops: :mrgreen: :lust: :lol: :lei: :lefthh: :kiss: :jq: :hush: :heng: :han: :grin: :grievance: :good: :fuck: :fight: :down: :dizzy: :despise: :curse: :cry: :cry2: :crash: :cool: :co: :ca: :bye: :booger: :bigqiu: :beat: :angry: :almostcry: :?: :-x :-o :-P :-D :( 8| 8-O 8) 0.0