Toon posts:

Vage laadtijd IE

Pagina: 1
Acties:

vrijdag 27 mei 2005 19:35

Acties:
  • k0ewl
  • Registratie: December 2003
  • Laatst online: 14-04 16:23

k0ewl

Topicstarter
beste mensen,

een klasgenoot van me werkt bij een design bedrijf en heeft de volgende website gedesigned. Ik moet hem in code maken.

Nu moest er een rollover in het navigatie menu.

het voorbeeld staat hier: http://sanitair.b2ontwerp.nl
nu gaat het dus om het middelste menu, want de rest werkt wel mooi, maar bij het middelste stuk zijn er op de een of andere manier laadtijden. In firefox doet alles het wel lekker snel en is er niks aan de hand.

de code van javascript:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

var pageNr = 0;

function highlightNav(toggle, object) {
    if(toggle == 1) {
        document.getElementById(object).className = 'nav_border_over';
    } else {
        document.getElementById(object).className = 'nav_border';   
    }
    
    setPage();
}

function setPage() {
    if(pageNr != 0) {
        document.getElementById('nav' + pageNr).className = 'nav_border_over';  
    }
}

function setPageNr(number) {
    pageNr = number;
    
    setPage();
}


en dat wordt aangeroepen door dit:
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51

index.php:

<HTML>
<HEAD>
  <TITLE><? echo $pageTitle; ?></TITLE>
  <STYLE>
    <? include("stylesheet.css"); ?>
  </STYLE>
  <SCRIPT src="javascript.js"></SCRIPT>
</HEAD>
<BODY onLoad="setPageNr(<? echo $pageNr; ?>);">

heir wordt het menu geinclude

menu:
<TABLE class="btm_nav" cellpadding="0" cellspacing="0">
  <TR>
    <TD class="nav_title">
      <A href="?pageID=1" onMouseOver="highlightNav(1, 'nav1');" onMouseOut="highlightNav(0, 'nav1');">[img]"images/buttons/nieuws.gif"[/img]</A>
    </TD>
    <TD class="nav_empty" rowspan="2">&nbsp;</TD>
    <TD class="nav_title">
      <A href="?pageID=2" onMouseOver="highlightNav(1, 'nav2');" onMouseOut="highlightNav(0, 'nav2');">[img]"images/buttons/producten.gif"[/img]</A>
    </TD>
    <TD class="nav_empty" rowspan="2">&nbsp;</TD>
    <TD class="nav_title">
      <A href="?pageID=3" onMouseOver="highlightNav(1, 'nav3');" onMouseOut="highlightNav(0, 'nav3');">[img]"images/buttons/showrooms.gif"[/img]</A>
    </TD>
    <TD class="nav_empty" rowspan="2">&nbsp;</TD>
    <TD class="nav_title">
      <A href="?pageID=4" onMouseOver="highlightNav(1, 'nav4');" onMouseOut="highlightNav(0, 'nav4');">[img]"images/buttons/voorwaarden.gif"[/img]</A>
    </TD>
    <TD class="nav_empty" rowspan="2">&nbsp;</TD>
    <TD class="nav_title">
      <A href="?pageID=5" onMouseOver="highlightNav(1, 'nav5');" onMouseOut="highlightNav(0, 'nav5');">[img]"images/buttons/contact.gif"[/img]</A>
    </TD>
    <TD class="nav_empty" rowspan="2">&nbsp;</TD>
    <TD class="nav_title">
      <A href="?pageID=6" onMouseOver="highlightNav(1, 'nav6');" onMouseOut="highlightNav(0, 'nav6');">[img]"images/buttons/links.gif"[/img]</A>
    </TD>
    <TD class="nav_empty" rowspan="2" style="width: 50px;">&nbsp;</TD>
  </TR>
  <TR>
    <TD class="nav_border" id="nav1">&nbsp;</TD>
    <TD class="nav_border" id="nav2">&nbsp;</TD>
    <TD class="nav_border" id="nav3">&nbsp;</TD>
    <TD class="nav_border" id="nav4">&nbsp;</TD>
    <TD class="nav_border" id="nav5">&nbsp;</TD>
    <TD class="nav_border" id="nav6">&nbsp;</TD>
  </TR>
</TABLE>


waarom krijg ik die laadtijden?

A byte walks into a bar and orders a pint. Bartender asks him "What's wrong?" Byte says "Parity error." Bartender nods and says "Yeah, I thought you looked a bit off."

vrijdag 27 mei 2005 19:43

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

crisp

Devver

Pixelated

IE en background-image-swaps == horror; om een of andere reden zal IE dan elke keer weer het plaatje opnieuw ophalen ipv uit de cache halen.
Maar volgens mij kan je hetzelfde effect met borders ook wel bereiken.

Intentionally left blank

vrijdag 27 mei 2005 19:44

Acties:

Verwijderd

Het omwisselen van de className is tijdrovend omdat IE het plaatje opnieuw zal ophalen. Een plaatje preloaden in een Image object, en dan de .src property van de knopjes veranderen zal de boel veel en veel sneller maken.

Internet Explorer gaat er gewoon niet zo handig mee om.

vrijdag 27 mei 2005 20:59

Acties:
  • k0ewl
  • Registratie: December 2003
  • Laatst online: 14-04 16:23

k0ewl

Topicstarter
kheb het opgelost door de hint om een image te gebruiken ipv een backgroundimage.

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

index.php:
--------------




javascript.js
-----------------
var pageNr = 0;

function highlightNav(toggle, object) { 
    if(toggle == 1) {
        source = document.getElementById(object).src;
        temp   = source.substring(source.length - 8);
        
        if(temp == "link.gif") {
            source = source.substring(0, source.length - 8) + 'over.gif';
            
            document.getElementById(object).src = source;
        }
    } else {
        source = document.getElementById(object).src;
        temp   = source.substring(source.length - 8);
        
        if(temp == "over.gif") {
            source = source.substring(0, source.length - 8) + 'link.gif';
            
            document.getElementById(object).src = source;
        }   
    }
    
    setPage();
}

function setPage() {
    if(pageNr != 0) {
        source = document.getElementById('nav' + pageNr).src;
        temp   = source.substring(source.length - 8);
        
        if(temp == "link.gif") {
            source = source.substring(0, source.length - 8) + 'over.gif';
            
            document.getElementById('nav' + pageNr).src = source;
        }   
    }
}

function setPageNr(number) {
    pageNr = number;
    
    setPage();
}


en het midden:
---------------------
<TABLE class="btm_nav" cellpadding="0" cellspacing="0">
  <TR>
    <TD class="nav_title">
      <A href="?pageID=1" onMouseOver="highlightNav(1, 'nav1');" onMouseOut="highlightNav(0, 'nav1');">[img]"images/buttons/nieuws.gif"[/img]</A>
    </TD>
    <TD class="nav_empty" rowspan="2">&nbsp;</TD>
    <TD class="nav_title">
      <A href="?pageID=2" onMouseOver="highlightNav(1, 'nav2');" onMouseOut="highlightNav(0, 'nav2');">[img]"images/buttons/producten.gif"[/img]</A>
    </TD>
    <TD class="nav_empty" rowspan="2">&nbsp;</TD>
    <TD class="nav_title">
      <A href="?pageID=3" onMouseOver="highlightNav(1, 'nav3');" onMouseOut="highlightNav(0, 'nav3');">[img]"images/buttons/showrooms.gif"[/img]</A>
    </TD>
    <TD class="nav_empty" rowspan="2">&nbsp;</TD>
    <TD class="nav_title">
      <A href="?pageID=4" onMouseOver="highlightNav(1, 'nav4');" onMouseOut="highlightNav(0, 'nav4');">[img]"images/buttons/voorwaarden.gif"[/img]</A>
    </TD>
    <TD class="nav_empty" rowspan="2">&nbsp;</TD>
    <TD class="nav_title">
      <A href="?pageID=5" onMouseOver="highlightNav(1, 'nav5');" onMouseOut="highlightNav(0, 'nav5');">[img]"images/buttons/contact.gif"[/img]</A>
    </TD>
    <TD class="nav_empty" rowspan="2">&nbsp;</TD>
    <TD class="nav_title">
      <A href="?pageID=6" onMouseOver="highlightNav(1, 'nav6');" onMouseOut="highlightNav(0, 'nav6');">[img]"images/buttons/links.gif"[/img]</A>
    </TD>
    <TD class="nav_empty" rowspan="2" style="width: 50px;">&nbsp;</TD>
  </TR>
  <TR>
    <TD class="nav_border">[img]"<?[/img]" width="100%" height="3" id="nav1"></TD>
    <TD class="nav_border">[img]"<?[/img]" width="100%" height="3" id="nav2"></TD>
    <TD class="nav_border">[img]"<?[/img]" width="100%" height="3" id="nav3"></TD>
    <TD class="nav_border">[img]"<?[/img]" width="100%" height="3" id="nav4"></TD>
    <TD class="nav_border">[img]"<?[/img]" width="100%" height="3" id="nav5"></TD>
    <TD class="nav_border">[img]"<?[/img]" width="100%" height="3" id="nav6"></TD>
  </TR>
</TABLE>

A byte walks into a bar and orders a pint. Bartender asks him "What's wrong?" Byte says "Parity error." Bartender nods and says "Yeah, I thought you looked a bit off."

vrijdag 27 mei 2005 21:06

Acties:

Verwijderd

Nu alleen nog even preloaden he...

vrijdag 27 mei 2005 23:32

Acties:
  • k0ewl
  • Registratie: December 2003
  • Laatst online: 14-04 16:23

k0ewl

Topicstarter
als ik al die plaatjes moet preloaden, dan duurt het eeuwen voor de hele pagina. dit is alleen maar even de navigatie. Toch allemaal bedankt... slotje pls

A byte walks into a bar and orders a pint. Bartender asks him "What's wrong?" Byte says "Parity error." Bartender nods and says "Yeah, I thought you looked a bit off."

vrijdag 27 mei 2005 23:56

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

crisp

Devver

Pixelated

Zoveel verschillende plaatjes zullen het toch niet zijn? En waarschijnlijk nog kleine plaatjes ook...

En slotje doen we meestal alleen bij slechte of uit de hand gelopen topics ;)

[ Voor 15% gewijzigd door crisp op 27-05-2005 23:56 ]

Intentionally left blank

zaterdag 28 mei 2005 00:19

Acties:
  • k0ewl
  • Registratie: December 2003
  • Laatst online: 14-04 16:23

k0ewl

Topicstarter
oke... de hele site bestaat straks uit plaatjes die vanuit een CMS up te loaden zijn. Neem bijvoorbeeld deze site (een van de vele die van deze site nog moete komen) http://www.thuisinlucht.nl

als ze dus via CMS gaan moet ik eerst de preload ook in PHP maken zodat ze wel alle plaatjes downloaden vanuit het CMS. maarja.. we zien wel

A byte walks into a bar and orders a pint. Bartender asks him "What's wrong?" Byte says "Parity error." Bartender nods and says "Yeah, I thought you looked a bit off."

zaterdag 28 mei 2005 00:21

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

crisp

Devver

Pixelated

Het preloaden hoef je alleen te doen voor de plaatjes die je gebruikt in je image-swaps hoor ;)

Intentionally left blank

zaterdag 28 mei 2005 09:56

Acties:

Verwijderd

Als je gewoon CSS gebruikt heb je het probleem geloof ik veel minder. Zeker als je alleen het plaatje verplaatst op :hover in plaats van wijzigt.

zaterdag 28 mei 2005 19:49

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

crisp

Devver

Pixelated

Verwijderd schreef op zaterdag 28 mei 2005 @ 09:56:
Als je gewoon CSS gebruikt heb je het probleem geloof ik veel minder. Zeker als je alleen het plaatje verplaatst op :hover in plaats van wijzigt.
Ook met het dynamisch verplaatsen van een background-image (zeg maar het sprite idee) bokt IE. Misschien dat het met :hover wel beter is...

Intentionally left blank

zaterdag 28 mei 2005 23:59

Acties:

Verwijderd

Ligt dat niet ook aan bepaalde cache instellingen die vooral developers aan hebben staan? Wanneer ik het toepas in IE heb ik er bijna nooit last van... Daarnaast ligt het geloof ik ook aan de grootte van het plaatje, et cetera. (Die link ben ik momenteel kwijt, was een mooi artikel over ergens... 50*50 werkte wel, 51*49 niet, oid.)

Deze heb ik nog wel: http://aspnetresources.co...e_control_extensions.aspx

zondag 29 mei 2005 00:45

Acties:
  • André
  • Registratie: Maart 2002
  • Laatst online: 06-05 11:13

André

Analytics dude

Verwijderd schreef op zaterdag 28 mei 2005 @ 23:59:
Ligt dat niet ook aan bepaalde cache instellingen die vooral developers aan hebben staan? Wanneer ik het toepas in IE heb ik er bijna nooit last van... Daarnaast ligt het geloof ik ook aan de grootte van het plaatje, et cetera. (Die link ben ik momenteel kwijt, was een mooi artikel over ergens... 50*50 werkte wel, 51*49 niet, oid.)

Deze heb ik nog wel: http://aspnetresources.co...e_control_extensions.aspx
Het ligt niet aan de cache instellingen want die heb ik normaal staan en toch haalt IE de backgrounds opnieuw op :) Ik heb geloof ik lokaal alles al geprobeerd met IE maar moving backgrounds zuigen.

[ Voor 7% gewijzigd door André op 29-05-2005 00:50 ]

Pagina: 1
Reageer