Css wordt vertraagd geladen?

Door Paul Ulje op 11-05-2017 17:13

2.320 views

Ik gebruik in diverse door php gegenereerde formulieren een lijstje dat steeds is uit te breiden.
Tik een woord in het vakje, sluit af met enter (o.i.d.) en het lijstje verschijnt opnieuw met een nieuw leeg vakje extra.
Dat werkt probleemloos.

ECHTER
Voeg ik (onderstaand fragment) een 'autofocus' toe, om de focus steeds in het laatste (lege) vakje te houden, dan verschijnt de pagina eerst zonder opmaak en direct daarna in de juiste opmaak.
Daardoor flikkert het scherm. En hoe meer data er bewerkt wordt, hoe langer de 'flikkertijd'.
Autofocus verwijderen lost het probleem weer op.

Doe ik iets fout, is er een eenvoudige remedie?


    $aV[]='';
    print "<table><tr><td>";
    $nr = 0;
    $verv = 'verv' . $nr;
    foreach ($aV as $waarde) {
        $s = "<br/><input type='text' size='15' onClick='this.select()' ";
        if (empty($waarde))
            $s = $s . " autofocus  ";
        $s = $s . " name = '" . $verv . "' value = '" . preHTML($waarde) . "' />";
        print $s;
        $nr++;
        $verv = 'verv' . $nr;
        if ($nr % 8 == 0)
            print("</td><td>");
    }
    print "</td></tr></table>";

Ward van der Put

13-05-2017 10:15

Aangezien maar één element de focus kan hebben, mag je het attribuut autofocus op maar één element toepassen. In de foreach pas je autofocus echter toe op alle lege elementen; ik kan mij voorstellen dat het verplaatsen van de focus tot een soort flikkering leidt. Kijk eens wat er gebeurt als je autofocus maar één keer toepast?

Als je het precies wilt weten, kun je in de developer tools van Google Chrome de "paints" voor het opbouwen van de webpagina vastleggen in screenshots. Dan zie je misschien ook welke operatie de boosdoener is.

Paul Ulje

13-05-2017 14:16 gewijzigd op 13-05-2017 14:33

Dank voor de tip Ward. Ik ga het nakijken.

Ik heb het alleen nog maar in Firefox bekeken. Misschien is dat wel de oorzaak :-)
Hoewel de focus WEL goed gezet wordt en dus de inline-css begrepen wordt.

Er maar één leeg veld, voor dit doel toegevoegd met $aV[]='';
Ook een solo invoerveld met autofocus 'paints' eerst de opmaakloze uitvoer/pagina.
En autofocus komt nergens verder in de code voor.

Als tijdelijke oplossing heb ik tabindex=1 gezet en kan het lijstje met een extra TAB na het ENTER makkelijk aangevuld worden.

OPGELOST!
Het probleem doet zich in Chrome NIET voor!
Dank!

:-)

Thomas van den Heuvel

13-05-2017 16:05

Waarom niet met JavaScript/jQuery: indien de pagina klaar is met laden selecteer het laatste veld middels een JavaScript snippet?

Paul Ulje

13-05-2017 20:47

Omdat ik het zonder jQuery doe, Thomas.

Zie het als vliegvissen.
Als ik gemakkelijk veel vis wil eten ga ik naar de visboer,
Leuker is het om met zo eenvoudig mogelijke middelen zelf een visje te vangen.

Maar inderdaad, nu ik op ouderwetse browserverschillen stuit, ga ik de definitieve oplossing t.z.t. zoeken in het DOM.

- Ariën -

13-05-2017 20:50

Wat je met jQuery kan doen, dat kan je ook met de normale 'vanilla JS' doen. ;-)

Paul Ulje

13-05-2017 20:57

Vanilla JS?

Sorry Ariën, ik ben niet zo goed op de hoogte van de nomenclatuur/jargon in PHP/HTML-land.
Ik bedoel het middels plat JavaScript direct benaderen van het Dynamic Object Model.
Bedoelen wij hetzelfde?

- Ariën -

13-05-2017 20:59

Ja, dat klopt.

Thomas van den Heuvel

14-05-2017 01:16

Je geeft aan dat je tegen verschillen tussen browsers aanloopt. Eén van de speerpunten van jQuery is juist dat deze cross-browser werkt. Je hoeft je dan in principe geen zorgen te maken over onderlinge verschillen tussen browsers. Dit in tegenstelling tot het mogelijke onheil wat je over jezelf afroept door met native JS te werken en/of op deze manier rechtstreeks het DOM te manipuleren. En dan heb ik het niet alleen over dit specifieke autofocus-probleem maar meer in het algemeen: je wilt toch een oplossing die vaker (en liefst altijd) inzetbaar is (en gewoon werkt) in plaats van elke keer in native JS te lopen prutten? Met libraries zoals jQuery til je jouw JavaScript-code naar een hoger niveau.

Je moet voor jezelf maar bepalen wanneer je het omslagpunt bereikt om jQuery in te zetten en als je meer toepassingen hebt binnen je website dan enkel een autofocus dan is dat natuurlijk meegenomen. Neemt niet weg dat je niet op voorhand oplossingen zou moeten uitsluiten.

B Ben van Velzen

14-05-2017 01:33

>> Eén van de speerpunten van jQuery is juist dat deze cross-browser werkt.
Dat klopt, zolang je doet wat jQuery van je verwacht. Er zijn ook binnen jQuery meerdere wegen die naar Rome leiden, en sommige wegen werken wel in de ene browser maar niet in de andere en dat komt puur door wat jQuery intern doet. Een library geeft je dus geen enkele garantie, maar verstandig is het wel.

Paul Ulje

14-05-2017 03:30 gewijzigd op 14-05-2017 13:43

Thomas, ik heb geen enkel bezwaar tegen het gebruik van een biblotheek of platform of hoe het ook heet. Ik weet hoe productuctief dat is. Sterker, ik heb vroeger, in het DOS tijdperk, veel 'utilities' geschreven, als ware het een platform voor DOS. Functionaliteit als een batch-editor, een bestand/tekst-zoekprgromma, popup bestandsmanagingsysteem, recursieve opschoonutilities, geheugenbeheer, multitasting en ik ben de uitvinder van het 'momentje geduld graag...' popupvenster (kenwoorden: de heap en beeldschermgeheugen). Kortom, vanalles dat in DOS toen nog ontbrak. Platform bouwen, als het ware, avant la lettre, om de mogelijkheden van DOS tot het uiterste uit te putten.

Maar ik programmeer niet voor de kost, ik programmeer voor mijn plezier alsook vermaak. Ik heb jQuery bestudeerd, middels boeken, voorbeelden, en eigen projecten uitgeprobeerd. Fantastische opwaardering, ik kan niet anders zeggen.

Maar ik lever geen productie. Ik doe het voor de lol.
En mijn levensmotto is altijd geweest: als iedereen zegt dat het zó moet, ga ik juist daarom toch eens kijken wat er gebeurt als ik het anders doe.

:-)

Reageren

Inloggen om te reageren