[jscript] preload doorway page - Softwareontwikkeling

zaterdag 2 augustus 2003 13:51

Acties:

Ergo

Topicstarter

Ondanks allerlei zoekacties op dit forum kom ik er niet helemaal uit. Ik probeer een doorway page te maken die niks anders doet dan images preloaden. Nadeel van alle preload scripts die ik gevonden heb, is dat deze goed preloaden binnen de pagina zelf, maar dat wil ik liever niet.

De reden hiervoor is simpel: het plaatje dat wordt geladen wordt middels css als achtergrond bij een menu gebruikt en aangezien gebruikers heen en weer zullen bewegen over het menu wordt het plaatje vermoedelijk niet compleet binnengehaald (telkens een paar frames van de gif en dan wordt de muis alweer verplaatst).

Nu heb ik dit in de head staan:

code:

<SCRIPT LANGUAGE="JavaScript">

//script laadt menu-item vooraf, voor optimale navigatie

function preload() {
image1 = new Image();
image1.src = "./images/menu/pannekoek-cutout.gif";

if (image1.complete) {
window.location.href= "frames.htm";
}
}
</script>

en de body tag is aangepast tot:

code:

1	<body onload="javascript:preload();">

Dit werkt in Mozilla, maar niet in IE.

Laat ik de check of het plaatje compleet geladen is weg, dan gaan beide browsers direct door met laden van de volgende pagina, wat dus niet de bedoeling is. Waar zit nu de fout?

Alvast bedankt!

zaterdag 2 augustus 2003 13:58

Acties:

crisp

Devver

Pixelated

Het duurt natuurlijk even voordat je plaatje geladen is (lokaal zal het natuurlijk sneller gaan dan online), dus je if-afvraging moet je in een loopje zetten met een timeout.
Zelf maak ik gebruik van het feit dat een image ook een onload event kent; klein voorbeeldje van wat ik heb gebruikt voor mijn lemmings preloader (met progressbar):

JavaScript:

var curprogress = 0;
var numpics;
var images = new Array();
var loaded = new Array();

function preload_images() {

  var preload_arr = [
    'img/progressbar.gif',
    'levels/level1_field.gif',
    'levels/level1_home.gif'
    ];

  numpics = preload_arr.length;

  preload(preload_arr);

}

function preload(arr) {

  for (var i = 0; i < arr.length; i++) {

    images[i] = new Image();
    images[i].id = 'img'+i;
    images[i].onload = progress;
    images[i].onerror = progress;
    images[i].src = arr[i];

  }

}

function progress() {

  if (!loaded[this.id]) {

    loaded[this.id] = 1;
    curprogress++;
    var w = Math.round(curprogress * (560 / numpics));
    document.getElementById('progressbar').style.width = w+'px';

  }

  if (curprogress == numpics) setTimeout('redirect()', 3000);

}

function redirect() {

  window.location.href='lemmings.html';

}

window.onload = preload_images;

ps, je zit in het verkeerde subforum, js hoort in W&G

[ Voor 4% gewijzigd door crisp op 02-08-2003 14:01 ]

Intentionally left blank

zaterdag 2 augustus 2003 14:03

Acties:

whoami

P&W -> W&G

https://fgheysels.github.io/

zaterdag 2 augustus 2003 14:15

Acties:

TromboneFreakus

Ergo

Topicstarter

crisp schreef op 02 August 2003 @ 13:58:
Het duurt natuurlijk even voordat je plaatje geladen is (lokaal zal het natuurlijk sneller gaan dan online), dus je if-afvraging moet je in een loopje zetten met een timeout.

Die timeout staat toch helemaal niet in je code, of mis ik nu iets?

En apart daarvan heb ik iets aparts ontdekt: Mozilla voert het script niet uit wanneer ik de pagina (met de naam index.htm) niet met de bestandsnaam aanroep maar via directory ('/'), terwijl aanroepen via index.htm wel werkt. IE voert het script lokaal wel uit, maar online weer niet.

Is het probleem dus niet iets met de namen i.p.v. de if-constructie?

[ Voor 6% gewijzigd door TromboneFreakus op 02-08-2003 14:19 ]

zaterdag 2 augustus 2003 14:28

Acties:

pietje63

RTFM

TromboneFreakus schreef op 02 augustus 2003 @ 14:15:
[...]

Die timeout staat toch helemaal niet in je code, of mis ik nu iets?

En apart daarvan heb ik iets aparts ontdekt: Mozilla voert het script niet uit wanneer ik de pagina (met de naam index.htm) niet met de bestandsnaam aanroep maar via directory ('/'), terwijl aanroepen via index.htm wel werkt. IE voert het script lokaal wel uit, maar online weer niet.

Is het probleem dus niet iets met de namen i.p.v. de if-constructie?

als ik jouw code zo lees (zonder veel kennis van javascript maar wel van verschillende andere talen) dan zal ik ook weinig doen

code:

1
2
3

if (image1.complete) {
window.location.href= "frames.htm";
}

en wat als image1 niet complete is dan gebeurt er niets

ik zou er iets van een else achter plakken en dat hij dan moet wachten en opnieuwe proberen of hij complete is

De grootste Nederlandstalige database met informatie over computers met zoekfunctie!!

zaterdag 2 augustus 2003 14:32

Acties:

TromboneFreakus

Ergo

Topicstarter

Crisp, je suggestie heb ik toch ter harte genomen. Nu wordt IE echter erg traag, met de volgende code:

code:

<SCRIPT LANGUAGE="JavaScript">

//script laadt menu-item vooraf, voor optimale navigatie

function preload() {
image1 = new Image();
image1.src = "./images/menu/pannekoek-cutout.gif";

while (!(image1.complete))
{
//
}
window.location.href= "frames.htm";
}
</script>

Kies ik hier voor de verkeerde constructie? Of kan het niet anders?

zaterdag 2 augustus 2003 14:36

Acties:

crisp

Devver

Pixelated

TromboneFreakus schreef op 02 August 2003 @ 14:15:
[...]

Die timeout staat toch helemaal niet in je code, of mis ik nu iets?

Ik maak gebruik van het onload event dat automatisch getriggered wordt als het plaatje geladen is; daarom heb ik geen loopjes nodig

En apart daarvan heb ik iets aparts ontdekt: Mozilla voert het script niet uit wanneer ik de pagina (met de naam index.htm) niet met de bestandsnaam aanroep maar via directory ('/'), terwijl aanroepen via index.htm wel werkt. IE voert het script lokaal wel uit, maar online weer niet.

draai je wel een webserver? die zorgt er normaal gesproken voor dat als je geen bestand opgeeft de index geladen wordt. Misschien is dat ook wel een feature in IE dat 'ie dat ook doet zonder dat je een webserver draait..

Is het probleem dus niet iets met de namen i.p.v. de if-constructie?

Je moet een loop gebruiken en je image1 expliciet global maken (is netter), zoiets als:

JavaScript:

var image1;

function preload() {

  image1 = new Image();
  image1.src = "./images/menu/pannekoek-cutout.gif";

  setTimeout('check_loaded()', 100);

}

function check_loaded() {

  if (image1.complete) {

    window.location.href = 'frames.htm';

  } else {

    setTimeout('check_loaded()', 100);

  }

}

note dat ik niet zeker weet of Mozilla de complete property wel kent, je zou ook de readyState property uit kunnen vragen (4 of 'complete' = loaded)
Verder verdient het zeker aanbeveling een maximum tijd te stellen, of ook het onerror event af te vangen in het geval het plaatje niet geladen kan worden.

TromboneFreakus schreef op 02 augustus 2003 @ 14:32:
Crisp, je suggestie heb ik toch ter harte genomen. Nu wordt IE echter erg traag, met de volgende code:

[...]
Kies ik hier voor de verkeerde constructie? Of kan het niet anders?

Zie mijn voorbeeld: een continuous while-loop hangt gewoon de browser op (100% CPU), dus beter met een timeout

[ Voor 32% gewijzigd door crisp op 02-08-2003 14:39 ]

Intentionally left blank

zaterdag 2 augustus 2003 14:41

Acties:

Cavorka

Internet Entrepreneur

Ik ben ook geen javascript held, maar om nou non-stop te gaan checken of een plaatjes is geladen?

Dat vraagt om trage IE's, hehe.

Probeer er een timer ofzo in te zetten, zodat je bijvoorbeeld elke .1s checkt. Ik kan er geen voorbeeld van geven, aangezien ik niet weet wat de functies daarvan zijn.

*Edit: hoe bedoel je deze reply is opeens overbodig?

[ Voor 14% gewijzigd door Cavorka op 02-08-2003 14:43 ]

the-blueprints.com - The largest free blueprint collection on the internet: 50000+ drawings.

zaterdag 2 augustus 2003 21:42

Acties:

TromboneFreakus

Ergo

Topicstarter

[quote]crisp schreef op 02 August 2003 @ 14:36:
[...]

Je moet een loop gebruiken en je image1 expliciet global maken (is netter), zoiets als:

JavaScript:

1	...Het perfecte antwoord...

Mijn dank is groot!! $_/-\o_$

Dit werkt, geeft geen rare resultaten en werkt bovendien in alle browsers (althans, MZ en IE). Ik ben geen kenner van Javscript en kan hier weer prima mee verder!

zaterdag 2 augustus 2003 23:04

Acties:

crisp

Devver

Pixelated

Mooi!

Intentionally left blank