Ładowanie strony

HTML to podstawy w dziedzinie tworzenia stron WWW, Style CSS warto opanować, bowiem za ich pomocą można dostosować odpowiednio wygląd swojej witryny WWW. Zagłębiamy się dalej i udostępniamy w tym forum możliwość zadawania pytań o JavaScript.
ODPOWIEDZ
Chris
Nowy
Nowy
Posty: 29
Rejestracja: sob paź 25, 2003 6:24 pm
Lokalizacja: Kraków

Ładowanie strony

Post autor: Chris »

Witam wszystkich serdecznie. :lol:
Mam pytanko. Jak można zrobić ( skąd ewentualnie pobrać kod) efekt ładowania strony- dokładnie taki, albo podobny ( idea ta sama) jaki jest używany w niniejszym forum...?
Przy długo ładującej się stronce efekt taki jest według mnie niezbędny, a tak się składa, że moja stronka ładuje się baaaardzo długo :? Dzięki za pomoc!
Mayhen
Nowy
Nowy
Posty: 158
Rejestracja: śr lip 10, 2002 9:21 pm
Lokalizacja: 21°41' E | 50°35' N
Kontakt:

Re: Ładowanie strony

Post autor: Mayhen »

dokładnie taki sam:
Obrazek

Kod: Zaznacz cały

http://forum.webinside.pl/images/loading.gif
to nie jest kod, a tylko animowany gif. Więc nie pokazuje on faktycznego procentu załadowanej strony. Taka sztuczka :], dzięki której umila się czas na załadowanie strony...
wcześniej zamiast tego było to:
:D

A jesli chodzi o twoją stronę (ta z profilu) to nie ładuje się ona znowu tak długo.
KaRoL
Działa
Działa
Posty: 1071
Rejestracja: czw kwie 03, 2003 2:40 pm

Re: Ładowanie strony

Post autor: KaRoL »

W <head> wklejasz dosyć duży skrypcik

Kod: Zaznacz cały

<script language="JavaScript1.2">
<!-- begin hiding
// (C) 2000 Marcin P Wojtowicz [[email protected]]. All rights reserved.
// Obtain permission before selling/redistributing in any medium.

startingColor = new Array() // <-- Do not modify!
endingColor = new Array() // <-- Do not modify!

// YOU MAY MODIFY THE FOLLOWING:
var yourImages = new Array("logo2.gif","menu1.gif","menu2.gif","http://www.liczniki.info/cgi-bin/licznik.cgi?6651") // Fill this array with the images you wish to preload
var locationAfterPreload = "index2.htm" // The script will redirect here when the preloading finishes *successfully*
var preloadbarWidth = 250 // The length of the preload bar. Should be greater than total amount of images you want to preload!
var preloadbarHeight = 15 // The height of the gradient/preload bar
var backgroundOfGradient = "#FFFFFF" // Default color while the preload bar is "filling up"

// Color the preloadbar is starting with - enter 1st, 3rd and 5th numbers/letters of color code
startingColor[0] = "0" 
startingColor[1] = "0"
startingColor[2] = "0"

// Color the preloadbar is going to end up with - enter the 1st, 3rd and 5th numbers/letters of color code
endingColor[0] = "0"
endingColor[1] = "0"
endingColor[2] = "0"

// FOR TROUBLESHOOTING:
var gap = 5 // PLAY AROUND WITH THIS SETTING IF YOU GET A JAVASCRIPT ERROR!!! 2 is the minumum value!!!


// DO NOT MODIFY ANYTHING BEYOND THIS POINT!!!

if (!document.all) location.replace(locationAfterPreload)
var a = 10, b = 11, c = 12, d = 13, e = 14, f=15, i, j, ones = new Array(), sixteens = new Array(), diff = new Array();
var convert = new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"), imgLen = yourImages.length;
var loaded = new Array(), preImages = new Array(), currCount = 0, pending = 0, h = 0, hilite = new Array(), cover = new Array();
var num = Math.floor(preloadbarWidth/gap);
for (i = 0; i < 3; i++) {
	startingColor[i] = startingColor[i].toLowerCase();
	endingColor[i] = endingColor[i].toLowerCase();
	startingColor[i] = eval(startingColor[i]);
	endingColor[i] = eval(endingColor[i]);
	diff[i] = (endingColor[i]-startingColor[i])/num;
	ones[i] = Math.floor(diff[i]);
	sixteens[i] = Math.round((diff[i] - ones[i])*15);
}
endingColor[0] = 0;
endingColor[1] = 0;
endingColor[2] = 0;
i = 0, j = 0;
while (i <= num) {
	hilite[i] = "#";
	while (j < 3) {
		hilite[i] += convert[startingColor[j]];
		hilite[i] += convert[endingColor[j]];
		startingColor[j] += ones[j];
		endingColor[j] += sixteens[j];
		if (endingColor[j] > 15) {
			endingColor[j] -= 15;
			startingColor[j]++;
		}
		j++;
	}
	j = 0;
	i++;
}
function loadImages() {
	for (i = 0; i < imgLen; i++) {
		preImages[i] = new Image();
		preImages[i].src = yourImages[i];
		loaded[i] = 0;
		cover[i] = Math.floor(num/imgLen)*(i+1)
	}
	cover[cover.length-1] += num%imgLen
	checkLoad();
}
function checkLoad() {
	if (pending) { changeto(); return }
	if (currCount == imgLen) { location.replace(locationAfterPreload); return }
	for (i = 0; i < imgLen; i++) {
		if (!loaded[i] && preImages[i].complete) {
			loaded[i] = 1; pending++; currCount++;
			checkLoad();
			return;
		}
	}
	setTimeout("checkLoad()",10);
}
function changeto() {
	if (h+1 > cover[currCount-1]) {
		var percent = Math.round(100/imgLen)*currCount;
		if (percent > 100) while (percent != 100) percent--;
		if (currCount == imgLen && percent < 100) percent = 100;
		defaultStatus = "Załadowano " + currCount + " z " + imgLen + " grafik [" + percent + "%].";
		pending--;
		checkLoad();
		return;
	}
	eval("document.all.cell" + (h+1) + ".style.backgroundColor = hilite[h]");;
	h++;
	setTimeout("changeto()",1);
}
defaultStatus = "Załadowano 0 z " + imgLen + " grafik [0%]."
// end hiding -->
</script>
No i chyba wiadomo jest już spolszczony przeze mnie więc wybierasz tekścik na pasku i adresy do grafik, które mają się ładować.

Później w <body> doklejasz skrypcik odpowiadający za pasek ładowania

Kod: Zaznacz cały

<script language="JavaScript1.2">
<!-- beging hiding
document.write('<table border="0" cellpadding="0" cellspacing="0" width="' + preloadbarWidth + '"><tr height="' + preloadbarHeight + '" bgcolor="' + backgroundOfGradient + '">');
for (i = 0; i < num; i++) {
	document.write('<td width="' + gap + '" id="cell' + (i+1) + '"></td>');
}
document.write('</tr></table>');
document.write('<p><small>    </small></p></font>')
loadImages();
// end hiding -->
</script>
No i tyle. Powinno działać. Efekt widoczny na stronie www klasa6c.website.pl - niestety muszę go zmodernizować, bo link do liczniku nie działa i strona nie może się do końca załadować. Niedługo to poprawię (wystarczy wykasować w skrypcie odpowiednią linijkę).
Chris
Nowy
Nowy
Posty: 29
Rejestracja: sob paź 25, 2003 6:24 pm
Lokalizacja: Kraków

Re: Ładowanie strony

Post autor: Chris »

Wielkie dzięki :) o to mi właśnie chodziło :)
Thx
Chris
Nowy
Nowy
Posty: 29
Rejestracja: sob paź 25, 2003 6:24 pm
Lokalizacja: Kraków

Re: Ładowanie strony

Post autor: Chris »

Wszystko super się ładuje i działa... ale tylko jpgi gify itd... :( Jak zrobić, żeby w tym kodzie można było wstawić także plik .swf itd ( liczniki działające też się nie łądują... )?

KAROL POMÓŻ :)
KaRoL
Działa
Działa
Posty: 1071
Rejestracja: czw kwie 03, 2003 2:40 pm

Re: Ładowanie strony

Post autor: KaRoL »

Nie mam pojęcia w czym Twój problem. Zwykle gdy zakładasz licznik serwis automatycznie generuje kod html który musisz wkleić.
U mnie przykładowo jest to coś takiego:

Kod: Zaznacz cały

<img src="http://www.liczniki.info/cgi-bin/licznik.cgi?6651" alt="Liczniki.INFO">
No i teraz wklejasz do kodu ten adres pomiędzy znacznikami " " w "src".
Oto kawałek takiego kodu ze skryptem:

Kod: Zaznacz cały

// YOU MAY MODIFY THE FOLLOWING:
var yourImages = new Array("http://www.liczniki.info/cgi-bin/licznik.cgi?6651","menu1.gif","menu2.gif") // Fill this array with the images you wish to preload
var locationAfterPreload = "index2.htm" // The script will redirect here when the preloading finishes *successfully*
I ma działać. Co do tych swf-ów. Może coś źle robisz. Teoretycznie wszystko powinno się załadowywać, ale może to być spowodowane tym, że pliki swf działają tylko z plug-in'em od Macromedii i są na stronę wstawiane jako ActiveX, a nie bezpośrednio jak obrazek. Ale co? Nie będzie bez tych swf-ów? Nie mogą się wczytać chwilkę później?
O, wpadłem na jeszcze jeden pomysł czemu to może nie działać.
W animacji często robi się taki własny licznik załadowania, prawda? No i żeby to się załadowało to faktycznie musi zostać ta animacja odtworzona, by załadowanie się zaczęło. To może być przyczyną. Skrypt nie odtwarza wszystkich animacji do końca! Gdyby tak było to strona wczytywałaby się 10 minut. :wink: Jakoś sobie poradzisz. Napisz jakby co.

Pozdrowienia!
8)

P.S. Możesz mi napisać na priv-a adres tej strony, to coś poradzimy :wink:
Duckman
Posty: 1
Rejestracja: pt lut 23, 2007 3:28 pm

Re: Ładowanie strony

Post autor: Duckman »

A gdzie mam wpisać jakie pliki mają się ładować
ODPOWIEDZ