OYEWAP.COM

  Is it possible to "preload" images in WML?

In the HTML world, images can be preloaded using simple JavaScript commands, but in WML or WMLscript there is no such thing. Paul St. George (email@paulstgeorge.com) provides this explanation on how to trick the browser into loading images without showing them. The images, if small enough, can then be read from the WAP device's cache quickly. Yes, it can be used for animating images :) And yes, if all the images will fit into the WAP device's memory, you won't get a "Connecting to service.." message in between each image either :)
  
Nic Mulvaney (nic.mulvaney@wuzap.org) has written a cool tool for sequencing WBMP animations. The program generates the WML code which can be pasted directly into your existing code. The tool is called WAP/WBMP Sequencer and is available at http://gizma.com/wap/.
  
You basically need to make some spacing images that are 1 pixel wide by the desired height. Make the images transparent apart from a 1 pixel x 1 pixel blob at each end. Use one of these that is 72 pixels high to make the first card appear empty. Use others at various heights to adjust the height of images so that they  are vertically aligned.
 
In the example below, note that you might have to change the value of the timer to allow enough time for your particular images to load.
 
Two examples using this for animating images are available at http://www.hashstar.f2s.com/anim/pane/index.wml and
http://www.hashstar.f2s.com/anim/wmail/index.wml 


  <wml>
    <card id="p" ontimer="#f1">
    <!-- Adjust this timer to taste. -->
    <timer value="10"/>
      <p align="center">
        <img src="spacer1.wbmp" alt="x"/>
      </p>
      <p>
        <img src="1.wbmp" alt="1"/>
      </p>
      <p>
        <img src="2.wbmp" alt="2"/>
      </p>
      <p>
        <img src="3.wbmp" alt="3"/>
      </p>
      <p>
        <img src="4.wbmp" alt="4"/>
      </p>
      <p>
        <img src="5.wbmp" alt="5"/>
      </p>
    </card>

    <card id="f1" ontimer="#f2">
      <timer value="10"/>
      <p align="center">
        <img src="spacer15.wbmp" alt="x"/>
      </p>
      <p align="center">
        <img src="1.wbmp" alt="1"/>
      </p>
    </card>

    <card id="f2" ontimer="#f3">
      <timer value="10"/>
      <p align="center">
        <img src="spacer10.wbmp" alt="x"/>
      </p>
      <p align="center">
        <img src="2.wbmp" alt="2"/>
      </p>
    </card>

    <card id="f3" ontimer="#f4">
      <timer value="10"/>
      <p align="center">
        <img src="spacer08.wbmp" alt="x"/>
      </p>
      <p align="center">
        <img src="3.wbmp" alt="3"/>
      </p>
    </card>

    <card id="f4" ontimer="#f5">
      <timer value="10"/>
      <p align="center">
        <img src="4.wbmp" alt="4"/>
      </p>
    </card>

    <card id="f5" ontimer="#f1">
      <timer value="10"/>
      <p align="center">
        <img src="5.wbmp" alt="5"/>
      </p>
    </card>
  </wml>