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..

Answer 2

What do you mean by

they are loaded at the same time

because they are not loaded at same time, first the page is loaded and in parallel as img tag are parsed images are loaded. So actually browser almost does what you want, you can test that by having a img which loads slowly you will see your form will load first.

Anyway what is the actual problem you are trying to solve.

Answer 3

Check this code . You should include jquery in your page or convert jquery code to normal javascript

http://jsfiddle.net/pt4DT/

Answer 4

I want form(input) to load first (and users to be able to write earlier), because images are not important, I want them to load at the end(after all html, css and js loads)

Ok, first of all let me say that this only is true for all the newer browser up from about IE6 I think (not sure when exactly), but that still should be the vast majority.

Below you can see an image of how a typical page load containing html (the first line being the html, the second js, the third and fourth css and the last the image).

As you can see the html is loaded first as it needs to know which js and css needs to be loaded. Now - and this depends on the browser and blocking/non blocking javascript - the image itself is sometimes loaded in parallel with the js/css or it's loaded once the css and javascript is finished downloading (as per the image above). Either way, whatever the browser decides to do, it will be the most optimal solution (e.g. there is a limit on the number of https request most browser will do in parallel which is solved by the spdy protocol, but that's another story). Now, looking more closely at the graph you can see two lines, one blue line which shows when the page is displayed to the user (with the form, but without the image) and a green line once the DOM is finished loading (including the image). Thus the browser is already doing exactly what you want it to do. However, as there are only about 100ms between the two points you probably don't conciously see this except if you have a lot of images.

The only important thing is to not lock the loading of your page in your javascript which can speed the loading of the page up incredibly (for example by loading most javascript after the page finishes loading by injecting it dynamically into the page). Either way, any optimizations benefit greatly from taking a look at the waterfall of your page load (the image above) in either firefox (with firebug and go to the net tab) or chrome (hit F12 and go to the network tab) showing what is loaded when and trying to get the blue line to move as much as possible to the left.

Answer 5

Try this one :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<script type="text/javascript">
function Addimg()
{
    document.getElementById("googleimg").src = "http://www.google.com/images/srpr/logo3w.png";
}
</script>
</head>

<body onload="Addimg()">
<div style="text-align:center">
<form method="get" action="http://www.google.com/search">
<img id="googleimg" src=""><br><input style="width:300px"name="q">
<input type="submit" value="Google Search" >
</form></div>
</body>

</html>

Answer 6

Yet another one:

Try This

HTML:

<div id="google-search-container">
    <form method="get" action="//www.google.com/search">
        <div id="google-logo"></div>
        <input id="q" name="q" />
        <input type="submit" value="Google Search" />
    </form>
</div>

JavaScript:

function addLogo() {
    document.getElementById('google-logo').style.backgroundImage = "url('//www.google.com/images/srpr/logo3w.png')";
}
window.onload = function() {
    addLogo();
}

CSS:

#google-search-container {
    text-align: center
}
#google-logo {
    margin: 10px auto;
    background-repeat: no-repeat;
    background-size:275px 95px;
    height: 95px;
    width: 275px
}
#q {
    width: 300px
}