title: Setting styles with JavaScript before rendering
body: <p>I have a list of images that are shown in a div each. The width of the divs will vary since they are specified as a percentage of their containers. The objective of that is to get a flexible design.</p>
  <p>The images are wider than their containing divs, but all images do not have the same width. I would like to shift the images by setting a negative margin-left on the images, and in that way center the images in their containers.</p>
  <p>Since the negative margins will depend on the width of the image, I need to check the width before setting the margins.</p>
  <pre><code>function marginsOfImages() {
      var images = document.getElementsByTagName('img');
      for (i = 0; i &lt; images.length; i++) {
          var parent = images[i].parentNode;
          var parentWidth = window.getComputedStyle(parent, null).getPropertyValue(&quot;width&quot;);
          /*In order to remove the &quot;px&quot; from the style: */
          var indexOfPx = parentWidth.search(&quot;px&quot;);
          parentWidth = parseInt(parentWidth.substring(0, indexOfPx));
          var imageWidth = window.getComputedStyle(images[i], null).getPropertyValue(&quot;width&quot;);
          indexOfPx = imageWidth.search(&quot;px&quot;);
          imageWidth = parseInt(imageWidth.substring(0, indexOfPx));
          var value = parentWidth + 90; //Want to shift the image 90px to the left
          if (imageWidth &gt; value) {
              images[i].style.marginLeft = (value * (-1)).toString() + &quot;px&quot;;
          }
      }
  }
  window.onload = marginsOfImages;
  </code></pre>
  <p>The problem is that the images are rendered without any margin at first, and then after a second or so they will get a margin depending on their width when the JavaScript has finished; the appearance of the images will change after the page apparently has already loaded.</p>
  <p>How can I set the correct margins before showing anything of the images? I need to load all images before determining their dimensions, right?</p>