Pastable version of Image Preloader

<div style="overflow:auto;border:solid 1px #ccc;background:#000;color:#F8F8F8">
          <div class="section">
            
            <pre style="float:left;margin:0 10px;border-right:0;color:#666;">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</pre>
            <pre class="sunburst"><span style="color:#AEAEAE;font-style:italic;"><span style="color:#AEAEAE;font-style:italic;">/*</span></span>
<span style="color:#AEAEAE;font-style:italic;"> Example Usage:</span>
<span style="color:#AEAEAE;font-style:italic;">    new ImagePreloader({</span>
<span style="color:#AEAEAE;font-style:italic;">     png: [ 'button_communities_hover', 'button_home_plans_hover', 'talk_to_us_button_hover', 'talk_to_us_close_hover' ],</span>
<span style="color:#AEAEAE;font-style:italic;">     jpg: [ 'talk_to_us_hover', 'talk_to_us_interior_hover' ]</span>
<span style="color:#AEAEAE;font-style:italic;">    }, { delay: 1.5 });</span>
<span style="color:#AEAEAE;font-style:italic;"><span style="color:#AEAEAE;font-style:italic;">*/</span></span>

<span style="color:#99CF50;">var</span> ImagePreloader <span style="color:#E28964;">=</span> Class.create({
  <span style="color:#89BDFF;">initialize</span>: <span style="color:#99CF50;">function</span>(<span style="color:#3E87E3;">images, opts</span>){

<span style="color:#3E87E3;">this</span>.<span style="color:#CF6A4C;">images</span> <span style="color:#E28964;">=</span> <span style="color:#E28964;">$</span>H(images);
    <span style="color:#E28964;">if</span> ((<span style="color:#3E87E3;">this</span>.<span style="color:#CF6A4C;">images</span>.keys().<span style="color:#CF6A4C;">length</span> <span style="color:#E28964;">&lt;=</span> <span style="color:#3387CC;">0</span>)<span style="color:#E28964;">||</span>(Prototype.Browser.MobileSafari)) <span style="color:#E28964;">return</span>;

<span style="color:#3E87E3;">this</span>.<span style="color:#CF6A4C;">options</span> <span style="color:#E28964;">=</span> {
      path:   opts.path   <span style="color:#E28964;">||</span> <span style="color:#65B042;"><span style="color:#65B042;">'</span>/images/<span style="color:#65B042;">'</span></span>,
      delay:  opts.delay  <span style="color:#E28964;">||</span> <span style="color:#3387CC;">2</span>,
      id:     opts.<span style="color:#CF6A4C;">id</span>     <span style="color:#E28964;">||</span> <span style="color:#65B042;"><span style="color:#65B042;">'</span>image_preloader<span style="color:#65B042;">'</span></span>
    };
    
    <span style="color:#3E87E3;">this</span>.<span style="color:#CF6A4C;">body</span> <span style="color:#E28964;">=</span> <span style="color:#E28964;">$</span>(<span style="color:#65B042;"><span style="color:#65B042;">'</span>body<span style="color:#65B042;">'</span></span>) <span style="color:#E28964;">||</span> <span style="color:#E28964;">$</span><span style="color:#E28964;">$</span>(<span style="color:#65B042;"><span style="color:#65B042;">'</span>body<span style="color:#65B042;">'</span></span>).first();

<span style="color:#3E87E3;">this</span>.<span style="color:#CF6A4C;">src</span> <span style="color:#E28964;">=</span> <span style="color:#E28964;">new</span> <span style="text-decoration:underline;">Template</span>(<span style="color:#65B042;"><span style="color:#65B042;">'</span>#{path}#{name}.#{ext}<span style="color:#65B042;">'</span></span>);
    <span style="color:#3E87E3;">this</span>.img <span style="color:#E28964;">=</span> <span style="color:#E28964;">new</span> <span style="text-decoration:underline;">Template</span>(<span style="color:#65B042;"><span style="color:#65B042;">'</span>&lt;img src=&quot;#{src}&quot; /&gt;<span style="color:#65B042;">'</span></span>);
    <span style="color:#3E87E3;">this</span>.srcs <span style="color:#E28964;">=</span> <span style="color:#E28964;">$</span>A();
    <span style="color:#3E87E3;">this</span>.imgs <span style="color:#E28964;">=</span> <span style="color:#E28964;">$</span>A();
    
    <span style="color:#3E87E3;">this</span>.boundCreateImgsArray <span style="color:#E28964;">=</span> <span style="color:#3E87E3;">this</span>.createImgsArray.bind(<span style="color:#3E87E3;">this</span>);

Event.observe(<span style="color:#9B859D;">window</span>, <span style="color:#65B042;"><span style="color:#65B042;">'</span>load<span style="color:#65B042;">'</span></span>, <span style="color:#3E87E3;">this</span>.boundCreateImgsArray);
  },
  <span style="color:#89BDFF;">createImgsArray</span>: <span style="color:#99CF50;">function</span>(){
    (<span style="color:#99CF50;">function</span>(){
      <span style="color:#3E87E3;">this</span>.<span style="color:#CF6A4C;">images</span>.each(<span style="color:#99CF50;">function</span>(pair){
        pair.<span style="color:#CF6A4C;">value</span>.each(<span style="color:#99CF50;">function</span>(name){
          <span style="color:#3E87E3;">this</span>.srcs.<span style="color:#DAD085;">push</span>(<span style="color:#3E87E3;">this</span>.<span style="color:#CF6A4C;">src</span>.evaluate({path: <span style="color:#3E87E3;">this</span>.<span style="color:#CF6A4C;">options</span>.path, name: name, ext: pair.key}));
        }.bind(<span style="color:#3E87E3;">this</span>));
      }.bind(<span style="color:#3E87E3;">this</span>));
      
      <span style="color:#3E87E3;">this</span>.srcs.each(<span style="color:#99CF50;">function</span>(src){
        <span style="color:#3E87E3;">this</span>.imgs.<span style="color:#DAD085;">push</span>(<span style="color:#3E87E3;">this</span>.img.evaluate({src: src}));
      }.bind(<span style="color:#3E87E3;">this</span>));
      
      <span style="color:#3E87E3;">this</span>.loadImages();

}.bind(<span style="color:#3E87E3;">this</span>)).delay(<span style="color:#3E87E3;">this</span>.<span style="color:#CF6A4C;">options</span>.delay);
  },
  <span style="color:#89BDFF;">loadImages</span>: <span style="color:#99CF50;">function</span>(){
    <span style="color:#3E87E3;">this</span>.<span style="color:#CF6A4C;">body</span>.insert(
      <span style="color:#E28964;">new</span> <span style="text-decoration:underline;">Element</span>(<span style="color:#65B042;"><span style="color:#65B042;">'</span>div<span style="color:#65B042;">'</span></span>, { id: <span style="color:#3E87E3;">this</span>.<span style="color:#CF6A4C;">options</span>.<span style="color:#CF6A4C;">id</span> }).hide().insert(<span style="color:#3E87E3;">this</span>.imgs.<span style="color:#DAD085;">join</span>(<span style="color:#65B042;"><span style="color:#65B042;">'</span><span style="color:#65B042;">'</span></span>))
    );
    <span style="color:#3E87E3;">this</span>.removeImages.bind(<span style="color:#3E87E3;">this</span>).delay(<span style="color:#3E87E3;">this</span>.<span style="color:#CF6A4C;">options</span>.delay <span style="color:#E28964;">+</span> <span style="color:#3E87E3;">this</span>.imgs.<span style="color:#CF6A4C;">length</span>);
  },
  <span style="color:#89BDFF;">removeImages</span>: <span style="color:#99CF50;">function</span>(){
    <span style="color:#E28964;">$</span>(<span style="color:#3E87E3;">this</span>.<span style="color:#CF6A4C;">options</span>.<span style="color:#CF6A4C;">id</span>).<span style="color:#DAD085;">remove</span>();
  }
});
</pre>
          </div>
        </div>

<a href="http://refactormycode.com/codes/198-image-preloader" style="color:#fff" title="As seen on RefactorMyCode.com"><img alt="Small_logo" src="http://refactormycode.com/images/small_logo.gif" style="border:0" /></a>

counter free hit invisible