Zmiana kolejności ładowania diva Opcje

[thepeche]

Witam!

Mam następujący problem do rozwiązania.
Otóż w moim sklepie postanowiłem wrzucić wyszukiwarkę google w nagłówek strony.
Jednak sama wyszukiwarka dość długo laduje się przy wejściu na stronę i zatrzymuje ładowanie się reszty strony do czasu aż sama się załaduje.
Chciałbym by div zawierający wyszukiwarkę był pomijany w ładowaniu strony dopóki strona cała się nie zaladuje. Wtedy zaczynała by sie ładowac dopiero wyszukiwarka.


Bardziej obrazowo:

<header>
<div1>
<div id="Wyszukiwarka"><--chciałbym by div był pomijany w ładowaniu strony dopóki strona cała się nie zaladuje. Wtedy zaczynała by sie ładowac dopiero wyszukiwarka.
<div1>
<div1>
itd...
</header>

<strona>
...
...
...
</strona>

<footer>
....
</footer>

Oswiadczam, że jestem absolutnie zielony w te sprawy, jednak bardzo dziękuje gdyby ktoś zechciał wspomóc mnie jakimś skryptem, który zrealizował by moje założenie.

Pozdrawiam!

[thepeche]

Dziękuje bardzo lukasz1985.

Niestety cos "przeszkadza" i kod nie wykonuje sie poprawnie, czy są to może style css zawarte w kodzie html?
Czy kod mam umiescić w nagłówku gdzie chce by sie wyswietłał div, czy w footer, czyli jak załaduje sie stopka, ktora jest ostatnim elementem do wczytania na stronie?

[HTML] pobierz, plaintext 
 
<div="wyszukiwarkaGoogle"></div>
 
 
<script type="text/javascript>
 
 
 
window.addEventListener("load", function() {
 
  document.getElementById("wyszukiwarkaGoogle").innerHTML = " 
                    <div id='cse' style="width:37.3%; position:absolute; top:180px; left:72px;">Loading</div>
<script src='//www.google.com/jsapi' type='text/javascript'></script>
<script type='text/javascript'>
google.load('search', '1', {language: 'pl', style: google.loader.themes.V2_DEFAULT});
google.setOnLoadCallback(function() {
  var customSearchOptions = {};
  var orderByOptions = {};
  orderByOptions['keys'] = [{label: 'Relevance', key: ''} , {label: 'Date', key: 'date'}];
  customSearchOptions['enableOrderBy'] = true;
  customSearchOptions['orderByOptions'] = orderByOptions;
  customSearchOptions['overlayResults'] = true;
  var customSearchControl =   new google.search.CustomSearchControl('011599289272865291231:-i9dlxieymi', customSearchOptions);
  customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
  var options = new google.search.DrawOptions();
  options.setAutoComplete(true);
  customSearchControl.draw('cse', options);
}, true);
</script>
<style type='text/css'>
  .gsc-control-cse {
    font-family: Arial, sans-serif;
    border-color: #FFFFFF;
    background-color:#F0E7D6;
    padding:0px 0px 0px 0px;
    background:none;
    border:none;
 
 
 
  }
  .gsc-control-cse .gsc-table-result {
    font-family: Arial, sans-serif;
  }
  input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus {
    border-color: #D9D9D9;
  }
  input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus {
    border-color: #666666;
    background-color: #F0E7D6/*#CECECE*/;
    background-image: none;
    /*background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5b4636), to(#7d6957));
background-image: -webkit-linear-gradient(top, #5b4636, #7d6957);
background-image: -moz-linear-gradient(top, #5b4636, #7d6957);
background-image: -ms-linear-gradient(top, #5b4636, #7d6957);
background-image: -o-linear-gradient(top, #5b4636, #7d6957);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5b4636', endColorstr='#7d6957');*/
  /*  filter: none;*/
 
 
  }
  .gsc-tabHeader.gsc-tabhInactive {
    border-color: #FF9900;
    background-color: #ffffff;
  }
  .gsc-tabHeader.gsc-tabhActive {
    border-color: #E9E9E9;
    background-color: #E9E9E9;
    border-bottom-color: #FF9900
  }
  .gsc-tabsArea {
    border-color: #FF9900;
  }
  .gsc-webResult.gsc-result, .gsc-results .gsc-imageResult {
    border-color: #FFFFFF;
    background-color: #FFFFFF;
  }
  .gsc-webResult.gsc-result:hover, .gsc-imageResult:hover {
    border-color: #FFFFFF;
    background-color: #FFFFFF;
  }
  .gs-webResult.gs-result a.gs-title:link, .gs-webResult.gs-result a.gs-title:link b, .gs-imageResult a.gs-title:link, .gs-imageResult a.gs-title:link b  {
    color: #0000CC;
  }
  .gs-webResult.gs-result a.gs-title:visited, .gs-webResult.gs-result a.gs-title:visited b, .gs-imageResult a.gs-title:visited, .gs-imageResult a.gs-title:visited b {
    color: #0000CC;
  }
  .gs-webResult.gs-result a.gs-title:hover, .gs-webResult.gs-result a.gs-title:hover b, .gs-imageResult a.gs-title:hover, .gs-imageResult a.gs-title:hover b {
    color: #0000CC;
  }
  .gs-webResult.gs-result a.gs-title:active, .gs-webResult.gs-result a.gs-title:active b, .gs-imageResult a.gs-title:active, .gs-imageResult a.gs-title:active b {
    color: #0000CC;
  }
  .gsc-cursor-page {
    color: #0000CC;
  }
  a.gsc-trailing-more-results:link {
    color: #0000CC;
  }
  .gs-webResult .gs-snippet, .gs-imageResult .gs-snippet, .gs-fileFormatType {
    color: #000000;
  }
  .gs-webResult div.gs-visibleUrl, .gs-imageResult div.gs-visibleUrl {
    color: #008000;
  }
  .gs-webResult div.gs-visibleUrl-short {
    color: #008000;
  }
  .gs-webResult div.gs-visibleUrl-short  {
    display: none;
  }
  .gs-webResult div.gs-visibleUrl-long {
    display: block;
  }
  .gs-promotion div.gs-visibleUrl-short {
    display: none;
  }
  .gs-promotion div.gs-visibleUrl-long  {
    display: block;
  }
  .gsc-cursor-box {
    border-color: #FFFFFF;
  }
  .gsc-results .gsc-cursor-box .gsc-cursor-page {
    border-color: #E9E9E9;
    background-color: #FFFFFF;
    color: #0000CC;
  }
  .gsc-results .gsc-cursor-box .gsc-cursor-current-page {
    border-color: #FF9900;
    background-color: #FFFFFF;
    color: #0000CC;
  }
  .gsc-webResult.gsc-result.gsc-promotion {
    border-color: #336699;
    background-color: #FFFFFF;
  }
  .gsc-completion-title {
    color: #0000CC;
  }
  .gsc-completion-snippet {
    color: #000000;
  }
  .gs-promotion a.gs-title:link,.gs-promotion a.gs-title:link *,.gs-promotion .gs-snippet a:link  {
    color: #0000CC;
  }
  .gs-promotion a.gs-title:visited,.gs-promotion a.gs-title:visited *,.gs-promotion .gs-snippet a:visited {
    color: #0000CC;
  }
  .gs-promotion a.gs-title:hover,.gs-promotion a.gs-title:hover *,.gs-promotion .gs-snippet a:hover  {
    color: #0000CC;
  }
  .gs-promotion a.gs-title:active,.gs-promotion a.gs-title:active *,.gs-promotion .gs-snippet a:active {
    color: #0000CC;
  }
  .gs-promotion .gs-snippet, .gs-promotion .gs-title .gs-promotion-title-right, .gs-promotion .gs-title .gs-promotion-title-right * {
    color: #000000;
  }
  .gs-promotion .gs-visibleUrl,.gs-promotion .gs-visibleUrl-short  {
    color: #008000;
  }
</style>
 
        ";})
 
 </script>
 
[HTML] pobierz, plaintext