Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webprogrammeren & scripting

Cashing probleem met JaveScript

[m]
18 antwoorden
  • Wellicht dat iemand me met die probleem kan helpen. Voor een website moet ik steeds een ander plaatje in een nieuw window plaatsen. Omdat de plaatjes niet allemaal even groot zijn wil ik de grootte van het window aanpassen aan het formaat van het plaatje.
    Het probleem is nu dat bij de eerste keer laden het plaatje niet wordt getoond. Na een refresh (F5) wel.
    Ik gebruik JavaScript omdat ik dan snel nieuwe code kan maken m.b.v. variabelen (de webserver ondersteund geen php).

    Mijn probleem lijkt op een klassiek preload probleem, maar de standaard oplossingen werken niet. Ik wil me niet verlagen tot het toepassen van een timer, volgens mij moet het eleganter lukken.
    Probleem is dat het probleem zich vooral voordoet bij een langzame verbinding. Ook is het lastig dat je het maar een keer testen, omdat daarna het plaatje wel in de cash staat.

    Het probleem heb ik in de volgende code samengevat
    [code:1:2906587082]
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <script language=javascript1.2>
    var Image01= new Image;
    Image01.src='Image1.jpg'
    </script>
    </head>

    <body>
    <script language=javascript1.2>
    document.write("name="+Image01.src+", width="+Image01.width+", height="+Image01.height+"<br><br>");
    document.write("<table border='0' cellspacing='0' cellpadding='0'>");
    document.write("<tr>");
    document.write(" <td valign ='middle'><img src="+Image01.src+" width="+Image01.width+" height="+Image01.height+" border='2' align='bottom'></td>");
    document.write("</tr>");
    document.write("</table>");
    </script>
    </body>
    </html>
    [/code:1:2906587082]
    Dit is ook te vinden op: http://home.hccnet.nl/jc.visser/proef/voorbeeld1.html. Hier staan meerdere versies, steeds met een volgend nummer, om te proberen.

    Ik heb al dagen op het internet gezocht en alleen dezelfde problemen gevonden, echter zonder werkende oplossingen.

    Hopelijk kan iemand me helpen.
  • Probeer het eens met behulp van JavaScript DOM en het onload-event van een window. De eerste zorgt voor een goede cross-browser afhandeling én dat de gegenereerde code klopt, de tweede zorgt ervoor dat het script pas uitgevoerd wordt als alle HTML geladen is.

    Daarnaast wil ik je even wijzen op het feit dat [i:695c378e14]language=javascript1.2[/i:695c378e14] al heel erg lang achterhaald is. Gebruik liever [i:695c378e14]type="text/javascript"[/i:695c378e14]. Ik hoop dat je hier wat mee kan.

    - Bas
  • De breedte en hoogte van het plaatje zijn pas bekend als het plaatje geladen is. Daarvoor krijgt het een breedte en hoogte van 0, en dat is precies wat er gebeurt bij jouw code.
    Hier een stukje code wat wel zou moeten werken (collega badmintonners moeten elkaar tenslotte helpen ;-) )

    [code:1:bd41f99343]
    <html>
    <head>
    <script type="text/javascript">
    var Image01= new Image();
    Image01.src=image01.jpg';
    window.onload=function(){
    Image01.onload=function(){
    var c=document.getElementById('container');
    c.innerHTML="name="+Image01.src+", width="+Image01.width+", height="+Image01.height+"<br><br>";
    c.appendChild(Image01);
    }
    }
    </script>
    </head>

    <body>
    <div id="container">
    </div>
    </body>
    </html>
    [/code:1:bd41f99343]
  • Hmmm, ik ben hier een typisch geval van de beste stuurlui… :D

    - Bas
  • Bedankt voor jullie reacties.

    Helaas krijg ik het nog steeds niet voor elkaar. De code van mw22 resulteerd bij mij niet in een plaatje op het scherm. Zelf ben ik niet bekend met innerHTLM en dat soort zaken. Ook met informatie van de Microsoft MSDN library kom ik er niet uit.

    Graag jullie hulp..


    Bedankt, Koos.


    PS. mw22, waar speel jij?
  • Nou, je had gelijk, dat was helemaal fout van mij :oops:
    Ik ging ervan uit dat met pl=new Image() en pl.src='blahblah' er wel een onload event zou plaatsvinden.
    Nou kennelijk niet. Daarvoor moet die iig kennelijk al aan het document zijn toegevoegd.

    Dit zou moeten werken in iig mozilla en ie6:
    [code:1:8a3bf01ed4]
    <html>
    <head>
    </head>
    <body>
    <div id="container">
    <div id="tekst"></div>
    <img src="Image1.jpg" id="plaatje">
    </div>
    <script type="text/javascript">
    var plaatje1=document.getElementById('plaatje');
    plaatje1.onload=doe;

    function doe(){
    var c=document.getElementById('tekst');
    c.innerHTML="name="+plaatje1.src+", width="+plaatje1.width+", height="+plaatje1.height;
    }
    </script>
    </body>
    </html>
    [/code:1:8a3bf01ed4]

    Er is een bug met ie5, die niet altijd onload afvuurt voor plaatjes e.d.
    Als je wil dat het daarin ook altijd goed werkt, dan zul je toch een timer moeten gebruiken:

    [code:1:8a3bf01ed4]
    function doe2(){
    if (plaatje1.complete==true){doe();return;}
    setTimeout('doe2()',200);
    }
    setTimeout('doe2()',200);
    [/code:1:8a3bf01ed4]
    Je kunt dan die onload event handler weghalen.

    Ik had het ook fout met dat je de breedte en hoogte van een plaatje niet kunt achterhalen als hij nog niet volledig is geladen.
    Als ik het me goed herinner is het in ie mogelijk om erachter te komen wat de breedte/hoogte is van een plaatje tijdens het laden, itt Mozilla (mja , als ik het me goed herinner).

    Ik speel in Wageningen, bij BC de Kantjils :P
  • Bedankt voor je antwoord, het werkt perfect :D
    Nu nog proberen deze hogere Java[b:2b5897b794]script[/b:2b5897b794]-kunde te begrijpen.. :oops:

    Heb jij de website van De Kantjils gebouwd? Ziet er goed uit!

    Zelf speel ik bij BC Flits in Wierden, in Overijssel. Over een paar dagen hoop ik jouw input te gebruiken bij het fotoalbum van de club, zie http://www.bcflits.nl (de site wordt door een heel team opgebouwd en onderhouden)


    Nogmaals bedankt voor je hulp!!
  • Ja, hoewel ik hem nu niet meer onderhoud (ik hang teveel rond op fora :P )

    Ziet er flitsend uit jullie site, maar dat krijg je natuurlijk de hele tijd te horen :D

    Nog een kleine tip:
    In plaats van:
    [code:1:ac79c4c501]
    <a href="#" value="open me" onclick="Liggend('evenementen/j1.html')">
    [/code:1:ac79c4c501]
    Doe dit:
    [code:1:ac79c4c501]
    <a href="evenementen/j1.html" onclick="Liggend(this.href)">
    [/code:1:ac79c4c501]
    Dit werkt ook nog als een gebruiker javascript uit heeft staan en je kunt zien in de statusbar waar de link naar toe wijst. Vind ik meestal ook erg prettig. Je zou ook via de dom aan al die linkjes een onclick event handler
    kunnen hangen.
    value="open me" - ik weet eigenlijk niet wat je hiermee wil bereiken. Ik denk een tooltip. Dan moet je title="open me" gebruiken.
  • Bedankt voor de tip!
    Het is een "erfenis" van mijn voorganger die het fotoalbum als eerste was begonnen. Maar het werkt en als je vers aan webdesign begint neem je dat dankbaar over 8)


    Op dit moment probeer is jouw stukje code toe te passen, maar weet ik niet hoe ik variabelen boven in de pagina kan zetten zodat de rest van de pagina steeds identiek kan zijn (ben een beetje lui aangelegd en wil dus niet voor iedere foto te veel code aanpassen) :wink:


    :-? Hm, er is blijkbaar een hogere macht die teksten kan aanpassen.. :-?
    [size=9:11f7a779ed]Misschien ben ik wel gered van een blunder..[/size:11f7a779ed]
  • [quote:280d6d1c31="Koos Visser"]

    :-? Hm, er is blijkbaar een hogere macht die teksten kan aanpassen.. :-?
    [size=9:280d6d1c31]Misschien ben ik wel gered van een blunder..[/size:280d6d1c31][/quote:280d6d1c31]

    Ik zeg maar niets :)
  • Ik heb hier iets gemaakt, zoals ik denk dat je het ongeveer wil hebben:
    http://home.hccnet.nl/m.wargers/flits/actueel.html
    De linkjes verwijzen nu nog naar de thumbnails, dus die moet je dan nog maar aanpassen.
    Er is nog wel wat meer werk aan te doen, qua styling en zo.

    Het was een hels karwei met dat window open script; browser-incompatibiliteiten en scoping problemen.
    En naar mijn mening loont het de moeite niet. Ik heb zelf (als bezoeker) veel liever dat zo'n plaatje gewoon in dezelfde window blijft geopend.
  • Wow, indrukwekkend! :o
    Ik had wel door dat je met Java[i:2270a8b656]script[/i:2270a8b656] HTML kan genereren, maar op deze manier..

    Dat openen van een nieuw window was het oorspronkelijke ontwerp van de site, wat ik zonder nadenken had gecopiëerd. Enig voordeel dat ik kan verzinnen is dat het sneller lijkt te werken bij een langzame verbinding, omdat de overzicht pagina geopend blijft.. We denken toch al na over een andere navigatie, dan kunnen we dat wellicht meenemen.

    Omdat je code vrij uitgebreid is, is het me wel duidelijk wat er gebeurd.
    Bedankt voor je moeite in de late uurtjes :P :P
    Ik heb er veel van geleerd!
  • [quote:50b28dcd11="Koos Visser"]
    Ik had wel door dat je met Java[i:50b28dcd11]script[/i:50b28dcd11] HTML kan genereren, maar op deze manier..
    [/quote:50b28dcd11]
    Ha ha, wacht maar tot je javascript ziet die javascript genereert. Toen ik dat voor het eerst zag viel ik om mijn stoel van verbazing.
  • [quote:7f8f3fb9e0="mw22"]
    [code:1:7f8f3fb9e0]
    <a href="evenementen/j1.html" onclick="Liggend(this.href)">
    [/code:1:7f8f3fb9e0][/quote:7f8f3fb9e0]Doe maar liever:[code:1:7f8f3fb9e0]<a href="evenementen/j1.html" onclick="Liggend(this.href);return false;">[/code:1:7f8f3fb9e0]Anders opent hij ook evenementen/j1.html in de pagina, en niet alleen de popup. :)
  • Oeps, je hebt gelijk dat was ik vergeten.
    Maar ondertussen had ik al een andere versie gemaakt.

    Als de functie Staand dit had bevat:
    if (document.all){event.returnValue=false;}else{e.preventDefault();};
    dan was het click-event ook gestopt.
    Dus return false is niet de enige mogelijkheid.
  • Nee, maar het is wel erg veel code… Trowens, ja kan natuurlijk ook gewoon die

    Return false;

    Aan het einde van de Liggend() functiezetten. Scheelt weer wat bytes.
  • Tsss… Wie post er nou op dit late uur?! Ga slapen man!

    Sorry, ietwat off-topic… :roll:

    - Bas
  • [quote:c437a4c9aa="BasHamar"]Tsss… Wie post er nou op dit late uur?! Ga slapen man!

    Sorry, ietwat off-topic… :roll:

    - Bas[/quote:c437a4c9aa]
    Of ga schaaatsen kijken?

    Dat zal trouwens niet helemaal gaan werken [m].
    De return waarde van de functie wordt niet doorgegeven aan het event object op die manier.
    Dan zul je dit moeten doen:
    function liggend(){
    return false;
    }
    <a href="http://nu.nl" onclick="return liggend()">staand</a>

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.