title: start a transition event after loaded a image
body: <p>I have a problem doing a transition, the div that contains the image should be going from "right: 200px;" to "400px" making the transition in 2s and the transition should start when the image is loaded in the document, here is the css code:</p>
  
  <pre><code>    div.contenedor {
          width: 300px;
          height: 257px;
          position: fixed;
          right: 200px;
          bottom: 0px;
          z-index: 100;
          -webkit-transition: right 2s;
          -moz-transition: right 2s;
          transition: right 2s;
      }
  </code></pre>
  
  <p>and here the js code:</p>
  
  <pre><code>        function transi() {
              var id = "L" + Math.floor(Math.random() * 10000);
              function open() {
                  var eOpen = document.getElementById(id + "_container");
                      eOpen.style.right = "400px";
              };
  
              var dContenedor = document.createElement("div");
              dContenedor.id = id + "_container";
              dContenedor.className = "contenedor";
  
              var ima = document.createElement("img");
              ima.src = "XXXX.jpg";
              ima.width = "300";
              ima.height = "250";
  
              dContenedor.appendChild(ima);
  
              document.onreadystatechange = function(){
                  var rsw = this.readyState;
                  console.log(rsw);
                  if (rsw) if (rsw != 'complete') if (rsw != 'loaded') {return;}
                  document.body.appendChild(dContenedor);
                  console.log(ima.complete);
                  if (ima.complete) {
                      open();
                  };
              }
          };
          transi();
  </code></pre>
  
  <p>For some reason is not making the transition, and the div is going direct to "400px", if someone have some ideas i would apreciate it, thank you in avance</p>