-
Notifications
You must be signed in to change notification settings - Fork 234
/
Assets.html
78 lines (61 loc) · 1.8 KB
/
Assets.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<p>
The image below should have a pink 4px border around it.
</p>
<img border="0" alt="MooTools" src="/asset/more/mootools.png" title="MooTools" rel="The best damn JS framework on Earth." id="moologo"/>
<hr />
<p>
A MooTools logo should load in the box below.
</p>
<div id="imgtest" style="background: #999; padding: 10px; margin: 8px;"></div>
<hr />
<p>
Three MooTools images should load in the box below.
</p>
<style>
#imgtest2 img {
background: #999;
padding: 10px;
margin: 8px;
}
#msg li {
margin-left: 20px;
list-style: disc;
}
</style>
<div id="imgtest2"></div>
<hr />
<p>
You should see confirmation that some JS loaded in the box below, as well as confirmation that the onload event fired successfully.
</p>
<ul id="msg"></ul>
<script src="/depender/build?require=More/Assets"></script>
<script>
Asset.css('/asset/more/Assets.css.test.css');
Asset.image('/asset/more/mootools.png', {
onLoad: function(){
this.inject('imgtest');
}
});
var images = [
'/asset/more/mootools.png',
'/asset/more/mootools.png',
'/asset/more/mootools.png'
];
var imgs = Asset.images(images, {
onComplete: function(){
imgs.inject('imgtest2');
},
onProgress: function(counter, index, source){
$('msg').adopt(new Element('li', {text: 'Image ' + counter + '/'+ images.length + ' with index #' + index + ': ' + source + ' is loaded successfully!'}));
},
onError: function(counter, index, source){
$('msg').adopt(new Element('li', {text: 'Image ' + counter + '/'+ images.length + ' with index #' + index + ': ' + source + ' is errored!'}));
}
});
$('msg').adopt(new Element('li', {text: 'testing onload event...'}));
Asset.javascript('/asset/more/Assets.js.test.js', {
onLoad: function(){
$('msg').adopt(new Element('li', {text: 'JavaScript onLoad fired successfully!'}));
}
});
</script>