Preload in html

Question

I've made a simple google search code like this:

<div style="text-align:center">
<form method="get" action="http://www.google.com/search">
<img src="http://www.google.com/images/srpr/logo3w.png"><br><input style="width:300px"name="q">
<input type="submit" value="Google Search" >
</form></div>

and in this , code(including the form) and image(google image) loads at the same time.

How can I make the form(input) to load firstly, and than the image?

Answer 1

You can set the src of the image once the DOM is ready..

<div style="text-align:center">
    <form method="get" action="http://www.google.com/search">
        <img id="googleimage" data-src="http://www.google.com/images/srpr/logo3w.png"/><br>
        <input style="width:300px"name="q">
        <input type="submit" value="Google Search" >
    </form>
</div>

<script type="text/javascript">
   document.addEventListener("DOMContentLoaded", function(){
      var img = document.getElementById('googleimage');
      img.src = img.getAttribute('data-src');
   }, false);
</script>

Demo at http://jsfiddle.net/gaby/mpEeF/

---

Just adding that in case that the problem is that as images are loaded (that might be before the form) the form is being pushed down, making hard to locate and edit it, the only solution would be to add actual sizes (width/height through the style attribute) to the images, so that the browser can correctly calculate the final look of the page, even before the images have loaded..