Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Preloader strony głównej w jquery
Forum PHP.pl > Forum > XML, AJAX
pantera366
Witam,mam sobie taką oto stronkę strona główna-portfolio strona główna.Preloader pobrałem ze strony http://www.gayadesign.com/diy/queryloader2...ages-with-ease/ jak widać loader ładuje się przy wejściu na stronę główną,natomiast problem w tym ze robi to za każdym razem np jak przeskoczę do zakładki galeria a następnie z powrotem na główna preloader znowu się ładuje a ja chciałbym aby ładował się tylko raz przy pierwszym uruchomieniu strony i ewentualnie przy odswiezaniu.Czy ktoś ma pomysł jak temu zaradzić ? Pzdr

Kod skryptu

  1.  
  2.  
  3. <script type="text/javascript">
  4. $(document).ready(function () {
  5. $("body").queryLoader2();
  6. });


  1.  
  2. (function($) {
  3. var qLimages = new Array;
  4. var qLdone = 0;
  5.  
  6. var qLimageContainer = "";
  7. var qLoverlay = "";
  8. var qLbar = "";
  9. var qLpercentage = "";
  10. var qLimageCounter = 0;
  11.  
  12. var qLoptions = {
  13. onComplete: function () {},
  14. backgroundColor: "#000",
  15. barColor: "#fff",
  16. barHeight: 2,
  17. percentage: true,
  18. deepSearch: true,
  19. completeAnimation: "fade",
  20. onloadComplete: function () {
  21. if (qLoptions.completeAnimation == "grow") {
  22. $(qLbar).stop().css("width", "100%").animate({
  23. top: "0%",
  24. height: "100%"
  25. }, 500, function () {
  26. $(qLoverlay).fadeOut(900, function () {
  27. $(this).remove();
  28. qLoptions.onComplete();
  29. })
  30. });
  31. } else {
  32. $(qLoverlay).fadeOut(1200, function () {
  33. $(qLoverlay).remove();
  34. qLoptions.onComplete();
  35. });
  36. }
  37. }
  38. }
  39.  
  40. var afterEach = function () {
  41. createPreloadContainer();
  42. createOverlayLoader();
  43. }
  44.  
  45. var createPreloadContainer = function() {
  46. qLimageContainer = $("<div></div>").appendTo("body").css({
  47. display: "none",
  48. width: 0,
  49. height: 0,
  50. overflow: "hidden"
  51. });
  52. for (var i = 0; qLimages.length > i; i++) {
  53. $.ajax({
  54. url: qLimages[i],
  55. type: 'HEAD',
  56. success: function(data) {
  57. qLimageCounter++;
  58. addImageForPreload(this['url']);
  59. }
  60. });
  61. }
  62. }
  63.  
  64. var addImageForPreload = function(url) {
  65. var image = $("<img />").attr("src", url).bind("load", function () {
  66. completeImageLoading();
  67. }).appendTo(qLimageContainer);
  68. }
  69.  
  70. var completeImageLoading = function () {
  71. qLdone++;
  72.  
  73. var percentage = (qLdone / qLimageCounter) * 100;
  74. $(qLbar).stop().animate({
  75. width: percentage + "%"
  76. }, 200);
  77.  
  78. if (qLoptions.percentage == true) {
  79. $(qLpercentage).text(Math.ceil(percentage) + "%");
  80. }
  81.  
  82. if (qLdone == qLimageCounter) {
  83. destroyQueryLoader();
  84. }
  85. }
  86.  
  87. var destroyQueryLoader = function () {
  88. $(qLimageContainer).remove();
  89. qLoptions.onloadComplete();
  90. }
  91.  
  92. var createOverlayLoader = function () {
  93. qLoverlay = $("<div id='qLoverlay'></div>").css({
  94. width: "100%",
  95. height: "100%",
  96. backgroundColor: qLoptions.backgroundColor,
  97. backgroundPosition: "fixed",
  98. position: "fixed",
  99. zIndex: 666999,
  100. top: 0,
  101. left: 0
  102. }).appendTo("body");
  103. qLbar = $("<div id='qLbar'></div>").css({
  104. height: qLoptions.barHeight + "px",
  105. marginTop: "-" + (qLoptions.barHeight / 2) + "px",
  106. backgroundColor: qLoptions.barColor,
  107. width: "0%",
  108. position: "absolute",
  109. top: "50%"
  110. }).appendTo(qLoverlay);
  111. if (qLoptions.percentage == true) {
  112. qLpercentage = $("<div id='qLpercentage'></div>").text("0%").css({
  113. height: "40px",
  114. width: "100px",
  115. position: "absolute",
  116. fontSize: "3em",
  117. top: "50%",
  118. left: "50%",
  119. marginTop: "-" + (59 + qLoptions.barHeight) + "px",
  120. textAlign: "center",
  121. marginLeft: "-50px",
  122. color: qLoptions.barColor
  123. }).appendTo(qLoverlay);
  124. }
  125. }
  126.  
  127. var findImageInElement = function (element) {
  128. var url = "";
  129.  
  130. if ($(element).css("background-image") != "none") {
  131. var url = $(element).css("background-image");
  132. } else if (typeof($(element).attr("src")) != "undefined" && element.nodeName.toLowerCase() == "img") {
  133. var url = $(element).attr("src");
  134. }
  135.  
  136. if (url.indexOf("gradient") == -1) {
  137. url = url.replace(/url\(\"/g, "");
  138. url = url.replace(/url\(/g, "");
  139. url = url.replace(/\"\)/g, "");
  140. url = url.replace(/\)/g, "");
  141.  
  142. var urls = url.split(", ");
  143.  
  144. for (var i = 0; i < urls.length; i++) {
  145. if (urls[i].length > 0) {
  146. var extra = "";
  147. if ($.browser.msie && $.browser.version < 9) {
  148. extra = "?" + Math.floor(Math.random() * 3000);
  149. }
  150. qLimages.push(urls[i] + extra);
  151. }
  152. }
  153. }
  154. }
  155.  
  156. $.fn.queryLoader2 = function(options) {
  157. if(options) {
  158. $.extend(qLoptions, options );
  159. }
  160.  
  161. this.each(function() {
  162. findImageInElement(this);
  163. if (qLoptions.deepSearch == true) {
  164. $(this).find("*:not(script)").each(function() {
  165. findImageInElement(this);
  166. });
  167. }
  168. });
  169.  
  170. afterEach();
  171.  
  172. return this;
  173. };
  174.  
  175. })(jQuery);
  176.  
  177.  
  178.  
  179.  
cudny
Ja Ci dam tylko podpowiedź, niestety nie będę wnikał w kod wink.gif
Jeśli chcesz aby nie ładować strony od nowa musisz w nagłówku strony dać kotwicę # id kontentu i wywoływać cyklicznie funkcję, która sprawdza nagłówki. Jeśli nagłówek się zmienił to załadowac scashowaną zawartość (cashować możesz do zmiennej javascript'owej.
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.