jak już trwa preload, jak zmodyfikować ten skrypt aby najpierw wyświetlił pasek postępu a dopiero później uruchomił preload grafiki?
jak załadować do pamięci pliki piksel1 i piksel2 przed uruchomieniem reszty?
<script language="JavaScript" type="text/javascript">
<!--
var Imgi = new Array(); // Tablica obrazków
var Bledy = 0; // Liczba błędów
var preloadTimer; // Timer używany dalej
var JestPasek=false;
// - - - - - - - - - - - - - -
// Adres pod który przejść po zakończeniu ładowania.
var przejdzDoUrl = 'index2.php';
// Ścieżki do obrazków, z których składa się pasek:
var pasek1 = 'piksel1.gif';
var pasek2 = 'piksel2.gif';
// Rozmiary paska (w pikselach):
var pasekSzer = 250;
var pasekWys = 5;
// Pliki, które mają zostać załadowane:
preload('grafika/face1a.jpg');
preload('grafika/face1.jpg');
preload('grafika/prawetlo2.jpg');
preload('grafika/prawetlo.jpg');
preload('grafika/pixel.gif');
preload('grafika/menu_cv.gif');
preload('grafika/menu_home.gif');
preload('grafika/menu_o_mnie.gif');
preload('grafika/menu_strony.gif');
preload('grafika/menu_aplikacje.gif');
preload('grafika/menu_kontakt.gif');
preload('grafika/belka_gora.jpg');
preload('grafika/belka_goracv.jpg');
preload('grafika/belka_gornaomnie.jpg');
preload('grafika/belka_gorna_stron1.jpg');
preload('grafika/belka_gorna_stron2.jpg');
preload('grafika/belka_gorna_ewidencja.jpg');
preload('grafika/belka_gorna_edytor.jpg');
preload('grafika/belka_kontakt.jpg');
preloadStart();
// - - - - - - - - - - - - - -
// rozpoczyna ściąganie obrazka
function preload(url) {
if (document.images) {
var i = Imgi.length;
Imgi[i] = new Image();
Imgi[i].onerror = preloadOnError;
Imgi[i].src = url;
}
}
// wywoływana, jeśli wystąpił jakiś błąd - zlicza błędy
function preloadOnError() {
Bledy++;
}
// rozpoczyna ściąganie plików
function preloadStart() {
if (document.images) {
pasekImg1 = new Image();
pasekImg1.src = pasek1;
pasekImg2 = new Image();
pasekImg2.src = pasek2;
preloadCheck();
}
}
// sprawdza, czy ładowanie się już zakończyło
function preloadCheck() {
var i=0;
var l=Imgi.length;
var gotowe=0;
// Trochę zagęszczonego kodu:
for (i=0;i<l;i++)
if (Imgi[i].complete) gotowe++;
gotowe+=Bledy; //przyjmijmy, że obrazek przy którym
//wystąpił błąd jest gotowy
ustawPasek(Math.min(gotowe,l));
if (gotowe>=l) // to już wszystkie
self.location.replace(przejdzDoUrl);
else // któryś nie był ukończony
preloadTimer = setTimeout('preloadCheck()',3000);
}
function ustawPasek(n) {
// ustawia pasek na odpowiednią wartość
// zakładam, że pasek przesuwa się tylko w prawo!
if (JestPasek) {
for (var i=0;i<n;i++)
document.images['pasek_element_'+i].src=pasekImg2.src;
}
}
//-->
</script>
</head>
<body bgcolor="#ffffff">
<!-- Tabelka wyrównująca w pionie i poziomie -->
<table border=0 align=center width="100%" height="100%">
<tr>
<td valign=middle
align=center>
<h4>Trwa ładowanie grafiki, proszę czekać...</h4>
<h3>
<h3><br>
<script language="JavaScript" type="text/javascript">
<!--
// Tworzymy pasek:
if (document.images) {
var pasekJednSzer = Math.round(pasekSzer/Imgi.length);
for (var i=0;i<Imgi.length;i++) {
document.write('<img src="'+pasek1+'" ');
document.write('name="pasek_element_'+i+'" ');
document.write('width='+pasekJednSzer+' ');
document.write('height='+pasekWys+'>');
}
JestPasek = true;
}
//-->
</script>
<noscript>
<a href="index2.php">PrzejdĽ dalej</a>
</noscript>
</h3>
</td></tr></table>
<!-- Koniec tableki wyrównującej -->
*********************************************
ok już sobie poradziłem, wystarczy dodać:
preload('piksel1.gif');
preload('piksel2.gif');
var pasek1 = 'piksel1.gif';
var pasek2 = 'piksel2.gif';
i działa jak należy
