Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Zmiana kolejności ładowania diva
Forum PHP.pl > Forum > Po stronie przeglądarki
thepeche
17.01.2014, 00:51:01
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!
SaMi
17.01.2014, 15:53:22
uzyj onload
sowiq
17.01.2014, 16:02:48
Ładuj Ajaxem snitch.gif

jQuery.load()
lukasz1985
17.01.2014, 16:08:15
Najpierw usuń zawartość diva wyszukiwarka (ma być pusty w HTMLu). Potem dodaj:

[HTML] pobierz, plaintext 
  1. <script type="text/javascript>
  2.  
  3. window.addEventListener("load", function() {
  4.   document.getElementById("Wyszkukiwarka").innerHTML = "TUTAJ KOD HTML WYSZUKIWARKI GOOGLA";
  5. })
  6.  
  7. </script>
[HTML] pobierz, plaintext
thepeche
18.01.2014, 11:52:53
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 
  1.  
  2. <div="wyszukiwarkaGoogle"></div>
  3.  
  4.  
  5. <script type="text/javascript>
  6.  
  7.  
  8.  
  9. window.addEventListener("load", function() {
  10.  
  11.   document.getElementById("wyszukiwarkaGoogle").innerHTML = " 
  12.                     <div id='cse' style="width:37.3%; position:absolute; top:180px; left:72px;">Loading</div>
  13. <script src='//www.google.com/jsapi' type='text/javascript'></script>
  14. <script type='text/javascript'>
  15. google.load('search', '1', {language: 'pl', style: google.loader.themes.V2_DEFAULT});
  16. google.setOnLoadCallback(function() {
  17.   var customSearchOptions = {};
  18.   var orderByOptions = {};
  19.   orderByOptions['keys'] = [{label: 'Relevance', key: ''} , {label: 'Date', key: 'date'}];
  20.   customSearchOptions['enableOrderBy'] = true;
  21.   customSearchOptions['orderByOptions'] = orderByOptions;
  22.   customSearchOptions['overlayResults'] = true;
  23.   var customSearchControl =   new google.search.CustomSearchControl('011599289272865291231:-i9dlxieymi', customSearchOptions);
  24.   customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
  25.   var options = new google.search.DrawOptions();
  26.   options.setAutoComplete(true);
  27.   customSearchControl.draw('cse', options);
  28. }, true);
  29. </script>
  30. <style type='text/css'>
  31.   .gsc-control-cse {
  32.     font-family: Arial, sans-serif;
  33.     border-color: #FFFFFF;
  34.     background-color:#F0E7D6;
  35.     padding:0px 0px 0px 0px;
  36.     background:none;
  37.     border:none;
  38.  
  39.  
  40.  
  41.   }
  42.   .gsc-control-cse .gsc-table-result {
  43.     font-family: Arial, sans-serif;
  44.   }
  45.   input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus {
  46.     border-color: #D9D9D9;
  47.   }
  48.   input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus {
  49.     border-color: #666666;
  50.     background-color: #F0E7D6/*#CECECE*/;
  51.     background-image: none;
  52.     /*background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5b4636), to(#7d6957));
  53. background-image: -webkit-linear-gradient(top, #5b4636, #7d6957);
  54. background-image: -moz-linear-gradient(top, #5b4636, #7d6957);
  55. background-image: -ms-linear-gradient(top, #5b4636, #7d6957);
  56. background-image: -o-linear-gradient(top, #5b4636, #7d6957);
  57. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5b4636', endColorstr='#7d6957');*/
  58.   /*  filter: none;*/
  59.  
  60.  
  61.   }
  62.   .gsc-tabHeader.gsc-tabhInactive {
  63.     border-color: #FF9900;
  64.     background-color: #ffffff;
  65.   }
  66.   .gsc-tabHeader.gsc-tabhActive {
  67.     border-color: #E9E9E9;
  68.     background-color: #E9E9E9;
  69.     border-bottom-color: #FF9900
  70.   }
  71.   .gsc-tabsArea {
  72.     border-color: #FF9900;
  73.   }
  74.   .gsc-webResult.gsc-result, .gsc-results .gsc-imageResult {
  75.     border-color: #FFFFFF;
  76.     background-color: #FFFFFF;
  77.   }
  78.   .gsc-webResult.gsc-result:hover, .gsc-imageResult:hover {
  79.     border-color: #FFFFFF;
  80.     background-color: #FFFFFF;
  81.   }
  82.   .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  {
  83.     color: #0000CC;
  84.   }
  85.   .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 {
  86.     color: #0000CC;
  87.   }
  88.   .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 {
  89.     color: #0000CC;
  90.   }
  91.   .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 {
  92.     color: #0000CC;
  93.   }
  94.   .gsc-cursor-page {
  95.     color: #0000CC;
  96.   }
  97.   a.gsc-trailing-more-results:link {
  98.     color: #0000CC;
  99.   }
  100.   .gs-webResult .gs-snippet, .gs-imageResult .gs-snippet, .gs-fileFormatType {
  101.     color: #000000;
  102.   }
  103.   .gs-webResult div.gs-visibleUrl, .gs-imageResult div.gs-visibleUrl {
  104.     color: #008000;
  105.   }
  106.   .gs-webResult div.gs-visibleUrl-short {
  107.     color: #008000;
  108.   }
  109.   .gs-webResult div.gs-visibleUrl-short  {
  110.     display: none;
  111.   }
  112.   .gs-webResult div.gs-visibleUrl-long {
  113.     display: block;
  114.   }
  115.   .gs-promotion div.gs-visibleUrl-short {
  116.     display: none;
  117.   }
  118.   .gs-promotion div.gs-visibleUrl-long  {
  119.     display: block;
  120.   }
  121.   .gsc-cursor-box {
  122.     border-color: #FFFFFF;
  123.   }
  124.   .gsc-results .gsc-cursor-box .gsc-cursor-page {
  125.     border-color: #E9E9E9;
  126.     background-color: #FFFFFF;
  127.     color: #0000CC;
  128.   }
  129.   .gsc-results .gsc-cursor-box .gsc-cursor-current-page {
  130.     border-color: #FF9900;
  131.     background-color: #FFFFFF;
  132.     color: #0000CC;
  133.   }
  134.   .gsc-webResult.gsc-result.gsc-promotion {
  135.     border-color: #336699;
  136.     background-color: #FFFFFF;
  137.   }
  138.   .gsc-completion-title {
  139.     color: #0000CC;
  140.   }
  141.   .gsc-completion-snippet {
  142.     color: #000000;
  143.   }
  144.   .gs-promotion a.gs-title:link,.gs-promotion a.gs-title:link *,.gs-promotion .gs-snippet a:link  {
  145.     color: #0000CC;
  146.   }
  147.   .gs-promotion a.gs-title:visited,.gs-promotion a.gs-title:visited *,.gs-promotion .gs-snippet a:visited {
  148.     color: #0000CC;
  149.   }
  150.   .gs-promotion a.gs-title:hover,.gs-promotion a.gs-title:hover *,.gs-promotion .gs-snippet a:hover  {
  151.     color: #0000CC;
  152.   }
  153.   .gs-promotion a.gs-title:active,.gs-promotion a.gs-title:active *,.gs-promotion .gs-snippet a:active {
  154.     color: #0000CC;
  155.   }
  156.   .gs-promotion .gs-snippet, .gs-promotion .gs-title .gs-promotion-title-right, .gs-promotion .gs-title .gs-promotion-title-right * {
  157.     color: #000000;
  158.   }
  159.   .gs-promotion .gs-visibleUrl,.gs-promotion .gs-visibleUrl-short  {
  160.     color: #008000;
  161.   }
  162. </style>
  163.  
  164.         ";})
  165.  
  166.  </script>
  167.  
[HTML] pobierz, plaintext


owca_82
18.01.2014, 13:23:59
Cytat(lukasz1985 @ 17.01.2014, 16:08:15 ) *
[HTML] pobierz, plaintext 
  1. <script type="text/javascript>
  2. window.addEventListener("load", function() {
  3.   document.getElementById("Wyszkukiwarka").innerHTML = "TUTAJ KOD HTML WYSZUKIWARKI GOOGLA";
  4. })
  5. </script>
[HTML] pobierz, plaintext


"addEventListener" nie jest obsługiwany przez IE
lukasz1985
18.01.2014, 22:37:05
Jednak powinno to być trochę inaczej bo mieszają się znaki cudzysłowia i najprawdopodobniej wyskakuje błąd. Trzeba z tego kodu wyszukiwarki wyciąć to, co znajduje się w znacznikach <script> </script>, rezultat powinien wyglądać niej więcej tak:

To co ma być w HTMLu, style, wiadomo, można umieścić w nagłówku:

[HTML] pobierz, plaintext 
  1.  
  2. <div id="wyszukiwarkaGoogle">
  3. <div id='cse' style="width:37.3%; position:absolute; top:180px; left:72px;">Loading</div>
  4.  
  5. <script src='//www.google.com/jsapi' type='text/javascript'></script>
  6.  
  7. </div>
  8.  
  9. <style type='text/css'>
  10.  
  11.   .gsc-control-cse {
  12.  
  13.     font-family: Arial, sans-serif;
  14.  
  15.     border-color: #FFFFFF;
  16.  
  17.     background-color:#F0E7D6;
  18.  
  19.     padding:0px 0px 0px 0px;
  20.  
  21.     background:none;
  22.  
  23.     border:none;
  24.  
  25.  
  26.  
  27.  
  28.  
  29.  
  30.  
  31.   }
  32.  
  33.   .gsc-control-cse .gsc-table-result {
  34.  
  35.     font-family: Arial, sans-serif;
  36.  
  37.   }
  38.  
  39.   input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus {
  40.  
  41.     border-color: #D9D9D9;
  42.  
  43.   }
  44.  
  45.   input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus {
  46.  
  47.     border-color: #666666;
  48.  
  49.     background-color: #F0E7D6/*#CECECE*/;
  50.  
  51.     background-image: none;
  52.  
  53.     /*background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5b4636), to(#7d6957));
  54.  
  55. background-image: -webkit-linear-gradient(top, #5b4636, #7d6957);
  56.  
  57. background-image: -moz-linear-gradient(top, #5b4636, #7d6957);
  58.  
  59. background-image: -ms-linear-gradient(top, #5b4636, #7d6957);
  60.  
  61. background-image: -o-linear-gradient(top, #5b4636, #7d6957);
  62.  
  63. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5b4636', endColorstr='#7d6957');*/
  64.  
  65.   /*  filter: none;*/
  66.  
  67.  
  68.  
  69.  
  70.  
  71.   }
  72.  
  73.   .gsc-tabHeader.gsc-tabhInactive {
  74.  
  75.     border-color: #FF9900;
  76.  
  77.     background-color: #ffffff;
  78.  
  79.   }
  80.  
  81.   .gsc-tabHeader.gsc-tabhActive {
  82.  
  83.     border-color: #E9E9E9;
  84.  
  85.     background-color: #E9E9E9;
  86.  
  87.     border-bottom-color: #FF9900
  88.  
  89.   }
  90.  
  91.   .gsc-tabsArea {
  92.  
  93.     border-color: #FF9900;
  94.  
  95.   }
  96.  
  97.   .gsc-webResult.gsc-result, .gsc-results .gsc-imageResult {
  98.  
  99.     border-color: #FFFFFF;
  100.  
  101.     background-color: #FFFFFF;
  102.  
  103.   }
  104.  
  105.   .gsc-webResult.gsc-result:hover, .gsc-imageResult:hover {
  106.  
  107.     border-color: #FFFFFF;
  108.  
  109.     background-color: #FFFFFF;
  110.  
  111.   }
  112.  
  113.   .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  {
  114.  
  115.     color: #0000CC;
  116.  
  117.   }
  118.  
  119.   .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 {
  120.  
  121.     color: #0000CC;
  122.  
  123.   }
  124.  
  125.   .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 {
  126.  
  127.     color: #0000CC;
  128.  
  129.   }
  130.  
  131.   .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 {
  132.  
  133.     color: #0000CC;
  134.  
  135.   }
  136.  
  137.   .gsc-cursor-page {
  138.  
  139.     color: #0000CC;
  140.  
  141.   }
  142.  
  143.   a.gsc-trailing-more-results:link {
  144.  
  145.     color: #0000CC;
  146.  
  147.   }
  148.  
  149.   .gs-webResult .gs-snippet, .gs-imageResult .gs-snippet, .gs-fileFormatType {
  150.  
  151.     color: #000000;
  152.  
  153.   }
  154.  
  155.   .gs-webResult div.gs-visibleUrl, .gs-imageResult div.gs-visibleUrl {
  156.  
  157.     color: #008000;
  158.  
  159.   }
  160.  
  161.   .gs-webResult div.gs-visibleUrl-short {
  162.  
  163.     color: #008000;
  164.  
  165.   }
  166.  
  167.   .gs-webResult div.gs-visibleUrl-short  {
  168.  
  169.     display: none;
  170.  
  171.   }
  172.  
  173.   .gs-webResult div.gs-visibleUrl-long {
  174.  
  175.     display: block;
  176.  
  177.   }
  178.  
  179.   .gs-promotion div.gs-visibleUrl-short {
  180.  
  181.     display: none;
  182.  
  183.   }
  184.  
  185.   .gs-promotion div.gs-visibleUrl-long  {
  186.  
  187.     display: block;
  188.  
  189.   }
  190.  
  191.   .gsc-cursor-box {
  192.  
  193.     border-color: #FFFFFF;
  194.  
  195.   }
  196.  
  197.   .gsc-results .gsc-cursor-box .gsc-cursor-page {
  198.  
  199.     border-color: #E9E9E9;
  200.  
  201.     background-color: #FFFFFF;
  202.  
  203.     color: #0000CC;
  204.  
  205.   }
  206.  
  207.   .gsc-results .gsc-cursor-box .gsc-cursor-current-page {
  208.  
  209.     border-color: #FF9900;
  210.  
  211.     background-color: #FFFFFF;
  212.  
  213.     color: #0000CC;
  214.  
  215.   }
  216.  
  217.   .gsc-webResult.gsc-result.gsc-promotion {
  218.  
  219.     border-color: #336699;
  220.  
  221.     background-color: #FFFFFF;
  222.  
  223.   }
  224.  
  225.   .gsc-completion-title {
  226.  
  227.     color: #0000CC;
  228.  
  229.   }
  230.  
  231.   .gsc-completion-snippet {
  232.  
  233.     color: #000000;
  234.  
  235.   }
  236.  
  237.   .gs-promotion a.gs-title:link,.gs-promotion a.gs-title:link *,.gs-promotion .gs-snippet a:link  {
  238.  
  239.     color: #0000CC;
  240.  
  241.   }
  242.  
  243.   .gs-promotion a.gs-title:visited,.gs-promotion a.gs-title:visited *,.gs-promotion .gs-snippet a:visited {
  244.  
  245.     color: #0000CC;
  246.  
  247.   }
  248.  
  249.   .gs-promotion a.gs-title:hover,.gs-promotion a.gs-title:hover *,.gs-promotion .gs-snippet a:hover  {
  250.  
  251.     color: #0000CC;
  252.  
  253.   }
  254.  
  255.   .gs-promotion a.gs-title:active,.gs-promotion a.gs-title:active *,.gs-promotion .gs-snippet a:active {
  256.  
  257.     color: #0000CC;
  258.  
  259.   }
  260.  
  261.   .gs-promotion .gs-snippet, .gs-promotion .gs-title .gs-promotion-title-right, .gs-promotion .gs-title .gs-promotion-title-right * {
  262.  
  263.     color: #000000;
  264.  
  265.   }
  266.  
  267.   .gs-promotion .gs-visibleUrl,.gs-promotion .gs-visibleUrl-short  {
  268.  
  269.     color: #008000;
  270.  
  271.   }
  272.  
  273. </style>
  274.  
  275.  
  276.  
  277.  
[HTML] pobierz, plaintext



natomiast to ma być osobno, najlepiej w nagłówku:


[HTML] pobierz, plaintext 
  1.  
  2. <script type="text/javascript">
  3.  
  4.  
  5. var searchBarLoadListener = function() {
  6.  google.load('search', '1', {language: 'pl', style: google.loader.themes.V2_DEFAULT});
  7.  
  8. google.setOnLoadCallback(function() {
  9.  
  10.   var customSearchOptions = {};
  11.  
  12.   var orderByOptions = {};
  13.  
  14.   orderByOptions['keys'] = [{label: 'Relevance', key: ''} , {label: 'Date', key: 'date'}];
  15.  
  16.   customSearchOptions['enableOrderBy'] = true;
  17.  
  18.   customSearchOptions['orderByOptions'] = orderByOptions;
  19.  
  20.   customSearchOptions['overlayResults'] = true;
  21.  
  22.   var customSearchControl =   new google.search.CustomSearchControl('011599289272865291231:-i9dlxieymi', customSearchOptions);
  23.  
  24.   customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
  25.  
  26.   var options = new google.search.DrawOptions();
  27.  
  28.   options.setAutoComplete(true);
  29.  
  30.   customSearchControl.draw('cse', options);
  31.  
  32. }, true);
  33.  
  34. }
  35.  
  36.  
  37.  
  38. var isIE = window.attachEvent;
  39.  
  40. if (isIE) {
  41.  
  42.   (window.attachEvent("onload", searchBarLoadListener));
  43.  
  44. }
  45.  
  46. else {
  47.  
  48.   (window.addEventListener("load", searchBarLoadListener));
  49.  
  50. }
  51.  
  52.  
  53.  
  54. </script>
  55.  
[HTML] pobierz, plaintext



Mam nadzieje, że pomoże.
szagi3891
21.01.2014, 02:19:18
Zobacz : https://github.com/szagi3891/autoloadjs

Żeby strona nie muliła to trzeba przerzucić się na asynchroniczne ładowanie bibliotek.
W przykładzie demo jest użyta biblioteka googla odpowiedzialna za wykresy (też mocno muli stronę jeśli ją osadzimy nieasynchronicznie).

Analogicznie możesz sobie skonfigurować szukajkę.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.