Toon posts:

Javascript Preload image

Pagina: 1
Acties:
  • 110 views sinds 30-01-2008
  • Reageer

donderdag 14 augustus 2003 14:28

Acties:

Verwijderd

Topicstarter
Jajaja, zie de search...
Maar ik krijg het niet voor elkaar...

Ik heb al veel verschillende codes geprobeerd, maar het maakt allemaal geen kont uit. Wel heb ik mijn internet cache op elke keer nieuw staan, maar dat moet ook geen kont uitmaken, want hier werkt het wel!!!

Mijn HTML:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">

<link rel="stylesheet" type="text/css" href="stylesheet.css" />

<script language="javascript">
<!--
    function doPreload()
    {
        var go = new Image();
        go.src = 'img/go.gif';

        var go_over = new Image();
        go_over.src = 'img/go_over.gif';
    }
// -->
</script>

</HEAD>

<BODY onload="doPreload();">

<a class="onderdelen" href="#" 
onMouseOver="document.images['go'].src = 'img/go_over.gif';" 
onMouseOut="document.images['go'].src = 'img/go.gif';">

<img name="go" src="img/go.gif" border="0" 
onMouseOver="document.images['go'].src = 'img/go_over.gif';"
onMouseOut="document.images['go'].src = 'img/go.gif';">

&nbsp;stem zelf</a>

</BODY>
</HTML>


je kan de pagina ook hier bekijken.

[ Voor 60% gewijzigd door Verwijderd op 14-08-2003 14:33 ]

donderdag 14 augustus 2003 14:34

Acties:

Verwijderd

typisch gebruik:

HTML:
1
2
3
4
5
6
7
8
9
10

<script type="text/javascript">
   var preload = new Array();

   preload['naam'] = new Image();
   preload['naam'].src = 'plaatje2.gif';
</script>

...

[img]"plaatje1.gif"[/img]

Niet meer met url's gaan werken in de onmouseover call e.d., want dan is het complete nut van preloaden ver te zoeken.

[ Voor 16% gewijzigd door Verwijderd op 14-08-2003 14:34 ]

donderdag 14 augustus 2003 14:37

Acties:
  • Bosmonster
  • Registratie: Juni 2001
  • Laatst online: 19-08 22:14

Bosmonster

*zucht*

In principe zou dat dus geen zak uit moeten maken (en maakt het ook vaak niet). De url is een url van een gecached plaatje, dus of je nu deze uit een bestaand plaatje haalt of zelf typt... heb blijft dezelfde url-string. In de praktijk echter blijkt dit in sommige gevallen wel uit te maken in IE (bij gewone mouseovers niet overigens voor zover ik weet).

Het probleem bij jouw functie is dat je variabelen lokaal zijn en na de functie dus weer vergeten, en daarmee is het laden van het plaatje ook direct weer afgelopen. preloadeders moet je dus in ieder geval in een globale variabele opslaan.
Ik heb al veel verschillende codes geprobeerd, maar het maakt allemaal geen kont uit. Wel heb ik mijn internet cache op elke keer nieuw staan, maar dat moet ook geen kont uitmaken, want hier werkt het wel!!!
Dat maakt geen kont uit? Je verwacht dat er nog wat gecached wordt als je je cache uitzet? :P Zet je cache iig op automatisch. Hier maakt cheatah's manier dus wel iets uit, omdat ie hem dan direct uit het pagina-geheugen haalt ipv uit de cache om een of andere reden.

[ Voor 30% gewijzigd door Bosmonster op 14-08-2003 14:39 ]

donderdag 14 augustus 2003 14:39

Acties:

Verwijderd

Topicstarter
Werkt ook niet...

code is nu
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">

<link rel="stylesheet" type="text/css" href="stylesheet.css" />

<script language="javascript">
<!--
    function doPreload()
    {
        var preload = new Array();

        preload['go'] = new Image();
        preload['go'].src = 'img/go.gif';

        preload['go_over'] = new Image();
        preload['go_over'].src = 'img/go_over.gif';
    }
// -->
</script>

</HEAD>

<BODY onload="doPreload();">

<img name="go" src="img/go.gif" border="0" 
onMouseOver="document.images['go'].src = 'img/go_over.gif';" 
onMouseOut="document.images['go'].src = 'img/go.gif';">

</BODY>
</HTML>

donderdag 14 augustus 2003 14:41

Acties:
  • Bosmonster
  • Registratie: Juni 2001
  • Laatst online: 19-08 22:14

Bosmonster

*zucht*

Verwijderd schreef op 14 augustus 2003 @ 14:39:
Werkt ook niet...

code is nu
Voordat je gaat zeggen dat het niet werkt.. doe dan wel wat ie zegt :/ Want je hebt niks veranderd wat hij gezegd heeft behalve dat je nu je plaatjes in een array opslaat.. Nog steeds een lokale variabele, en nog steeds gebruik je de directe urls ipv de src van de gepreloade plaatjes...

[ Voor 16% gewijzigd door Bosmonster op 14-08-2003 14:41 ]

donderdag 14 augustus 2003 14:43

Acties:
  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

Verwijderd schreef op 14 August 2003 @ 14:28:
Jajaja, zie de search...
Maar ik krijg het niet voor elkaar...

Ik heb al veel verschillende codes geprobeerd, maar het maakt allemaal geen kont uit. Wel heb ik mijn internet cache op elke keer nieuw staan, maar dat moet ook geen kont uitmaken, want hier werkt het wel!!!
[...]

je kan de pagina ook hier bekijken.
Een paar tips:
1) gebruik geen name attributen maar id's als je elementen wilt aanspreken
2) gebruik nog liever het keywoord this binnen een eventhandler
3) waarom de mousover/out zowel op de link als op de img-tag?
4) als je al name attributen gebruikt, pas dan op met diezelfde namen gebruiken als JS variabelen
5) misschien helpt het wel als je je preload objecten global maakt
6) @ 5 kan je dan ook de source van je plaatje setten naar de src van je preloaded plaatje
7) waarom pas onload gaan preloaden?
8 ) zet toch cache toch maar op automatisch

en nog wat kleine dingetjes, dit zou ik er ongeveer van maken:

HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Titeltje</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<script type="text/javascript">

var go = new Image();
go.src = 'img/go.gif';
var go_over = new Image();
go_over.src = 'img/go_over.gif';

</script>
</head>
<body>

<a class="onderdelen" href="#">
<img src="img/go.gif" border="0" alt=""
  onmouseover="this.src=go_over.src"
  onmouseout="this.src = go.src" />
 stem zelf</a>

</body>
</html>


:)

9 ) spuit-11 :P (kunnen jullie voortaan niet even wachten totdat ik uitgetypt ben?)

[ Voor 3% gewijzigd door crisp op 14-08-2003 14:45 ]

Intentionally left blank

donderdag 14 augustus 2003 14:44

Acties:
  • Bosmonster
  • Registratie: Juni 2001
  • Laatst online: 19-08 22:14

Bosmonster

*zucht*

waarom pas onload gaan preloaden?
Das altijd goed imho... De site is het belangrijkste.. is die binnen dan eens gaan kijken of je bandbreedte hebt om plaatjes te gaan preloaden :)

donderdag 14 augustus 2003 14:45

Acties:

Verwijderd

Bosmonster schreef op 14 August 2003 @ 14:44:

Das altijd goed imho... De site is het belangrijkste.. is die binnen dan eens gaan kijken of je bandbreedte hebt om plaatjes te gaan prepostloaden :)
:+

donderdag 14 augustus 2003 14:46

Acties:
  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

Bosmonster schreef op 14 August 2003 @ 14:44:
[...]


Das altijd goed imho... De site is het belangrijkste.. is die binnen dan eens gaan kijken of je bandbreedte hebt om plaatjes te gaan preloaden :)
true, maar dan moet je wel oppassen dat je mouseovers geen js fouten genereren omdat het preload object nog niet bestaat :)

Intentionally left blank

donderdag 14 augustus 2003 14:49

Acties:
  • Bosmonster
  • Registratie: Juni 2001
  • Laatst online: 19-08 22:14

Bosmonster

*zucht*

crisp schreef op 14 August 2003 @ 14:46:
[...]

true, maar dan moet je wel oppassen dat je mouseovers geen js fouten genereren omdat het preload object nog niet bestaat :)
Das kwestie van een goeie preloader schrijven :P

donderdag 14 augustus 2003 14:54

Acties:
  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

Bosmonster schreef op 14 August 2003 @ 14:49:
[...]
Das kwestie van een goeie preloader schrijven :P
Das ook niet zo'n probleem (voor ons dan ;) ), maar zodra mensen hun cache niet op automatisch laten staan ben je nog nergens... :P

Intentionally left blank

donderdag 14 augustus 2003 15:02

Acties:

Verwijderd

Topicstarter
Kolere mensen, ik krijg niet eens te kans om te reageren...
Zitten jullie allemaal naast elkaar ofzo :P

Ok, ok.
De code van Crisp werkt ook niet bij mij.

Waarom ik tekstlinks gebruik?
Omdat ik wil dat ze via de tekst en het plaatje ergens naartoe gaan.

Waarom gebruik ik directe URL's?
Omdat ik van alle preloaders die ik gezien heb die van webmonkey het beste werkt. Namelijk ook als je de cache op ieder bezoek laat vernieuwen.

Als ik de code van webmonkey goed uitgepluist heb, hou ik dit over:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<script language="JavaScript">
<!--

function doPreload()
{
    var the_images = new Array('stuff3a/kwmatt.jpg','stuff3a/matbon.jpg','stuff3a/lunchMat.jpg');
    preloadImages(the_images);
}

function preloadImages(the_images_array) {
    for(var loop = 0; loop < the_images_array.length; loop++)
    {
        var an_image = new Image();
        an_image.src = the_images_array[loop];
    }
}

// -->
</script>

<!-- IN DE BODY -->
[img]"http://a1112.g.akamai.net/7/1112/492/02012000/static.wired.com/webmonkey/98/29/stuff3a/mattmarg.jpg"[/img]<br>

<a href = "#" onMouseOver = "image_one.src='stuff3a/kwmatt.jpg';">one</a><br>
<a href = "#" onMouseOver = "image_one.src='stuff3a/matbon.jpg';">two</a><br>
<a href = "#" onMouseOver = "image_one.src='stuff3a/lunchMat.jpg';">three</a><br>

donderdag 14 augustus 2003 15:06

Acties:

Verwijderd

Verwijderd schreef op 14 August 2003 @ 14:34:

Niet meer met url's gaan werken in de onmouseover call e.d., want dan is het complete nut van preloaden ver te zoeken.
Verwijderd schreef op 14 August 2003 @ 15:02:

<a href="#" onMouseOver="image_one.src='stuff3a/lunchMat.jpg';">three</a>
Tja...

Verder:
image_one.src is lelijk, rot en foutgevoelig.
Als je al zoiets gebruikt, schrijft het dan zo:
document.images['image_one'].src

[ Voor 21% gewijzigd door Verwijderd op 14-08-2003 15:08 ]

donderdag 14 augustus 2003 15:11

Acties:

Verwijderd

Topicstarter
ja maar die code is niet van mij, maar wel de enige code die goed werkt. Alleen krijg ik het zelf niet aan de praat in mijn pagina.

Misschien is die code wel slordig en helemaal verkeerd, maar het werkt goed op die pagina...

donderdag 14 augustus 2003 15:13

Acties:

Verwijderd

Topicstarter
Idd als ik de var globaal maak, dan werkt het een stuk beter...

Moest ff uitzoeken hoe dat ook alweer ging in JS.. :(

Maar er zit toch nog wel vertraging in.

[ Voor 16% gewijzigd door Verwijderd op 14-08-2003 15:14 ]

donderdag 14 augustus 2003 15:15

Acties:

Verwijderd

door niet var te gebruiken binnen een functie, of door de variabelen buiten een functie te declareren

die vertraging is er omdat je nog steeds gebruik maakt van url's in de onmouseover aanroep, vraag gewoon om de src property van een bestaand image object, de preloaded image dus

[ Voor 46% gewijzigd door Verwijderd op 14-08-2003 15:16 ]

donderdag 14 augustus 2003 15:16

Acties:

Verwijderd

Topicstarter
Ja, ik weet het weer ja.
Ik heb ze nu buiten een functie staan en zonder var idd.
Of is dat nou weer teveel van het goede :P

donderdag 14 augustus 2003 15:19

Acties:

Verwijderd

Topicstarter
die vertraging is er omdat je nog steeds gebruik maakt van url's in de onmouseover aanroep, vraag gewoon om de src property van een bestaand image object, de preloaded image dus
Dat doe ik toch ook?
-> onmouseover="this.src=go_over.src"

Zie pagina.

[ Voor 16% gewijzigd door Verwijderd op 14-08-2003 15:21 ]

donderdag 14 augustus 2003 15:30

Acties:
  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

Verwijderd schreef op 14 August 2003 @ 15:02:
[...]
code:
1
2
3
4
5
6
7
8
9

...
function preloadImages(the_images_array) {
    for(var loop = 0; loop < the_images_array.length; loop++)
    {
        var an_image = new Image();
        an_image.src = the_images_array[loop];
    }
}
...

[...]
Zie ik het nou verkeerd, of wordt variabele an_image alweer overschreven voordat het plaatje goed en wel geladen kan zijn? scriptverwerking stopt volgens mij niet om eerst het plaatje te laden en dan pas naar de volgende te gaan. Ik zie dus niet in dat dit ueberhaupt kan werken...

Intentionally left blank

donderdag 14 augustus 2003 15:37

Acties:

Verwijderd

Topicstarter
Ik heb geen idee, maar kijk eens op deze pagina

1. Zet je cache op elk bezoek vernieuwen.
2. wacht ff tot de pagina helemaal geladen is.
3. ga eens met je muis over de linken one, two en three onder het plaatje.

Ben ik nou gek of werkt het daar perfect??

[ Voor 6% gewijzigd door Verwijderd op 14-08-2003 15:37 ]

donderdag 14 augustus 2003 15:50

Acties:
  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

Verwijderd schreef op 14 augustus 2003 @ 15:37:
Ik heb geen idee, maar kijk eens op deze pagina

1. Zet je cache op elk bezoek vernieuwen.
2. wacht ff tot de pagina helemaal geladen is.
3. ga eens met je muis over de linken one, two en three onder het plaatje.

Ben ik nou gek of werkt het daar perfect??
Dat werkt hier perfect ja, maar ik zit dan ook achter een proxy in een 100Mbit netwerk. Figures...

Intentionally left blank

donderdag 14 augustus 2003 16:00

Acties:

Verwijderd

Topicstarter
Ik heb met mijn 7kb verbing geen moeite met die plaatjes van 83313 bytes van webmonkey, maar bij mijn eigen site heb ik wel een hapering met een plaatje van 209 bytes...

dinsdag 26 augustus 2003 20:00

Acties:
  • Fles
  • Registratie: Augustus 2001
  • Laatst online: 06-04-2023

Fles

Verwijderd schreef op 14 augustus 2003 @ 15:37:
Ik heb geen idee, maar kijk eens op deze pagina

1. Zet je cache op elk bezoek vernieuwen.
2. wacht ff tot de pagina helemaal geladen is.
3. ga eens met je muis over de linken one, two en three onder het plaatje.

Ben ik nou gek of werkt het daar perfect??
Jij bent gek... Bij mij werkt het nog met vertraging. En ik heb cache wel aan. Preload werkt gewoon niet. Ik denk dat het gewoon tussen je oren zit dat het sneller lijkt te gaan.

Zie hier:
www.ziso.nl/~mdoornik/menu.html

Precies hetzelfde prenciepe, maar zo traag als...

Ik kan nog zo veel voorbeelden letterlijk kopieren, maar als ik ze dan met mijn figuren gebruik, knetter traag.

woensdag 27 augustus 2003 09:40

Acties:
  • Bosmonster
  • Registratie: Juni 2001
  • Laatst online: 19-08 22:14

Bosmonster

*zucht*

Dat ligt mogelijk aan de server waarop je het draait. Kheb hetzelfde script op verschillende servers ook verschillende gedragingen zien vertonen. Mogelijk stuurt je server de verkeerde cache-control headers mee ofzo.

Alle preload voorbeelden lopen op mijn server prima en op alle andere die ik kan proberen ook. Ook het Webmonkey voorbeeld loopt bij mij prima met preload. Op jouw server loopt het inderdaad weer bagger. Ik durf te wedden dat als ik jouw code/plaatjes exact kopieer naar mijn server dat het prima loopt ;)

edit:

Ik zie nu dat je zelfs die images gewoon op een hele andere server hebt laten staan.. kopieer ze eerst eens naar je eigen server voor je dit soort mededelingen komt doen :P Als je iets denkt 'gevonden' te hebben, test en onderbouw het dan tenminste...

[ Voor 27% gewijzigd door Bosmonster op 27-08-2003 09:43 ]

Pagina: 1
Reageer