Blinkende Grafik?

vyo · 28.12.2008, 21:39

Hallo,

ich habe bei bestimmter Eingabe eines Passwortes ein Bild, das geladen wird und die Sicherheitsstufe darstellt. Jetzt habe ich aber das Problem, dass (manchmal) diese Grafik scheinbar immer neu lädt, weil die Grafik blinkt. Könnte natürlich auch was anderes sein, aber ich schätze da fehlt mir irgendeine Eingabe das zu verhindern. Was könnte grundsätzlich das Problem dafür sein? Ich hab ein bisschen gegoogelt und zu dem Thema was von JS-Preload gelesen... hat das was damit zu tun, dass ich die Bilder bereits im Head-Teil "preloaden" sollte?

LG

David · 28.12.2008, 22:57

Kann es sein, dass Du die Grafiken -zig Mal pro Sekunde austauschst?
Wenn ich mich recht erinnere, hattest Du doch nur drei verschiedene Stufen (niedrig, mittel, hoch) und auch nur drei Bilder.

vyo · 28.12.2008, 23:31

Ich kann ja mal den Teil zeigen, der für die Ausgabe bei der Eingabe jedes Buchstabens verantwortlich ist:

Code:

            if (rating <50){
                document.getElementById('passlevel').innerHTML = '<img src="img/icons/safety_low.gif">';
				document.getElementById('passlevel_txt').innerHTML = 'niedrig';
            }else if (rating <70 && pass.length<17){
                document.getElementById('passlevel').innerHTML = '<img src="img/icons/safety_middle.gif">';
				document.getElementById('passlevel_txt').innerHTML = 'mittel';
            }else if (rating >80 || pass.length>17){
                document.getElementById('passlevel').innerHTML = '<img src="img/icons/safety_high.gif">';
				document.getElementById('passlevel_txt').innerHTML = 'hoch';

David · 28.12.2008, 23:59

Und wie oft wird das nun alles ausgeführt? Wirklich nur ein Mal je Tastendruck?
Wie äußert sich das "Blinken"? Ein regelmäßiges/ständiges Flackern? Ein Mal pro Grafik?

vyo · 29.12.2008, 00:25

Ja, jede Eingabe lässt die Grafik irgendwie blinken. Ich vermute gerade aber auch, dass vielleicht der <div>-Tag für dieses blinken verantwortlich ist, weil der Text unter der Grafik auch von unten nach oben zu springen scheint für einen kurzen Moment, aber ich bin mir wie gesagt echt unsicher. Es flackert nur bei einer Eingabe. Wenn man nichts tut, ist alles in Ordnung. Ich weiß aber nicht woran das liegen könnte.

Wie könnte ich denn zum Test, ob es dann klappt, bewerkstelligen, dass die Grafik nur dann geladen wird, wenn tatsächlich ein Wechsel vorliegt? Also, wenn je Eingabe nicht die selbe Grafik geladen wird.

David · 29.12.2008, 01:30

*doppelt*

David · 29.12.2008, 01:30

Ich würde dem <img> tag per stlye="width:20px; height:20px" eine fest Größe geben und dann nur das src Attribut ändern.

Code:

<html>
  <head>
    <title>Beispiel</title>
    <script>
      function evalPassword() {
        var imgsrc, alttext;
        var rating = document.getElementById('pass').value.length * 10;
        
        if (rating >80 || pass.length>17) {
          imgsrc = "img/icons/safety_high.gif";
          alttext = "hoch";
        }
        else if (rating > 50) {
          imgsrc = "img/icons/safety_middle.gif";
          alttext = "mittel";
        }
        else {
          imgsrc = "img/icons/safety_low.gif";
          alttext = "niedrig";
        }
        
        document.getElementById('passlevel').src = imgsrc;
        document.getElementById('passlevel_text').value = alttext;
      }
    </script>
    <style type="text/css">
      #passlevel {
        width: 20px;
        height: 20px;
        vertical-align:middle;
      }
      #passlevel_text {
        width:8em;
        vertical-align:middle;
        border: 0;
      }
    </style>
  </head>
  <body>
    <div>
      <img id="passlevel" src="img/icons/none.gif"/>
      <input id="passlevel_text" type="text" readonly="readonly" />
    </div>
    <br />
    <input id="pass" type="text" onkeyup="evalPassword()" />
  </body>
</html>

vyo · 29.12.2008, 13:22

Hey, erneut vielen Dank für Deine Mühe! Ich weiß nicht woran es liegt, aber manchmal blinkt die Grafik garnicht, dafür aber wenn ich es irgendwie 3min später teste wieder. Ich habe deine Variante probiert, aber es leider irgendwie nicht hinbekommen, das mit meiner zu verbinden, da mein Script ja noch das "Rating" überprüft. Ich kann es ja einfach mal posten:

PHP-Code:

  <script type="text/javascript" language="JavaScript">

      <!--

     

      function fnCheck(){

          if (document.formpass.txtPass.value.length >=3){

            window.setTimeout(fnPasswdCheck(),1000)

        }else{

            document.getElementById('passlevel').innerHTML = '<img src="img/icons/safety_low.gif">';   

        }

      }

     

      function fnPasswdCheck()

         {

            var pass = document.formpass.txtPass.value;        //Password in Variable speichern

            var rating = 100;                                    //Variable um Sicherheitsrating zu speichern

            var optimalPasswordLength = 10;

           

            var numericChar = false;    //Variable fuer Zahlen

            var bigChar = false;        //Variable fuer Grossbuchstaben

            var smallChar = false;        //Variable fuer Kleinbuchstaben

            var specialChar = false;    //Variable fuer Sonderzeichen

           

            var passwordLength = pass.length;                            //Variable um Passwordlange zu speichern

           

            //pro fehlendem Zeichen auf optimale Laenge werden vom Rating 5 Punkte abgezogen

               var dif = optimalPasswordLength-passwordLength;

            if (dif>0){

                rating = rating - (dif*5);

            }

            //Ueberpruefen

            for(var i=0;i<passwordLength;i++) {

                var ascii = pass.charCodeAt(i);

                if (ascii>=48 && ascii<=57){ numericChar=true;            //Speichern wenn ein Zahlenwert vorkommt

                }else if (ascii>=65 && ascii<=90){ bigChar=true;         //Speichern wenn ein Grossbuchstabe vorkommt

                }else if (ascii>=97 && ascii<=122){ smallChar=true;     //Speichern wenn ein Kleinbuchstabe vorkommt

                }else if (ascii>=32 && ascii<=126){ specialChar=true;    //Speichern wenn ein Sonderzeichen vorkommt

                }

            }

           

            //Jeweils Punkte vom Rating abziehen wenn keine Klein-, Großbuchstaben, Sonderzeichen, Zahlen enthalten sind

            if(!smallChar) {

                rating -=12;

            }

            if(!bigChar) {

                rating -=12;

            }

            if(!numericChar) {

                rating -=12;

            }

            if(!specialChar) {

                rating -=12;

            }

           

            //Sicherheitsstufe anzeigen

            if (rating <50){

                document.getElementById('passlevel').innerHTML = '<img src="img/icons/safety_low.gif" width="131" height="14">';

                document.getElementById('passlevel_txt').innerHTML = 'niedrig';

            }else if (rating <70 && pass.length<19){

                document.getElementById('passlevel').innerHTML = '<img src="img/icons/safety_middle.gif" width="131" height="14">';

                document.getElementById('passlevel_txt').innerHTML = 'mittel';

            }else if (rating >80 || pass.length>19){

                document.getElementById('passlevel').innerHTML = '<img src="img/icons/safety_high.gif" width="131" height="14">';

                document.getElementById('passlevel_txt').innerHTML = 'hoch';

            }

 
         }

      //-->

</script>

Und HTML:

PHP-Code:

                                              <table width="646" border="0" cellspacing="0" cellpadding="0">

                                            <form name="formpass" method="post" action="">

                                              <tr>

                                                <td width="246">

                                                  Passwort:

                                                  <input type="password" size="25" maxlength="50" name="txtPass" onKeyUp="fnCheck()">

                                                </td>

                                                <td id="passlevel" width="144"><img src="img/icons/safety_none.gif"></td>

                                                <td id="passlevel_txt" width="256">keine</td>

                                              </tr></form>

                                            </table>

Jetzt habe ich zusätzlich einen weiteren Fehler gefunden: Wenn ich z.B. eine richtig lange Eingabe mache und diese dann mit einem mal lösche (also ganz schnell mit gedrückter Taste und nicht mit einzelnem Tastendruck), passiert es, dass der Text hierbei z.B. von "hoch" nicht mehr "auf "niedrig" springt, sondern "hoch" bleibt. Woran könnte das denn liegen?

Bleda · 29.12.2008, 14:54

Wenn du die Bilder nicht preloadest und auf diese Art austauscht, müssen sie immer erst noch geladen werden, bevor sie angezeigt werden. Das resultiert dann darin, dass man kurz kein Bild sieht, solange bis das neue geladen ist. Dass es manchmal schneller geht liegt wohl am Browser-Cache.

Also entweder du lädst die Bilder schon im voraus, oder du packst alle Bilder in eins, bindest das als Hintergrund (eines DIVs oder so) ein und verschiebst dann den Hintergrund per JS so, dass man den richtigen Ausschnitt sieht.

Und wegen dem Löschen: Probier doch mal onChange anstatt onKeyUp.

Alles Tipps ohne Gewähr. Ich hoffe es hilft.

David · 29.12.2008, 15:12

Zitat:

function fnCheck(){
if (document.formpass.txtPass.value.length >=3){
window.setTimeout(fnPasswdCheck(),1000)
}else{
document.getElementById('passlevel').innerHTML = '<img src="img/icons/safety_low.gif">';
}
}

Warum die Verzögerung um eine Sekunde?

Zitat:

Zitat von vyo

aber es leider irgendwie nicht hinbekommen, das mit meiner zu verbinden, da mein Script ja noch das "Rating" überprüft

Tut mein Beispiel doch auch. Nur wesentlich einfacher (weil es eben nur ein Beispiel ist)

Code:

var rating = document.getElementById('pass').value.length * 10;

onchange reagiert erst, wenn Enter gedrückt wird oder das Feld verlasen wird.
Das Problem mit dem Löschen kann ich bei meinem Beispiel nicht nachvollziehen. Sobald die Backspace-Taste losgelassen wird, wird das rating neu berechnet und angezeigt.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
IP-Adresse per Grafik anzeigen lassen	Aoz	Scriptbörse	6	29.12.2008 19:54
Grafik bzw Balken	Black-Devil	PHP Tipps 2008	3	26.08.2008 14:58
TinyMCE Editor mit GD Grafik	rezix	PHP Tipps 2008	8	18.12.2007 22:46
GD-lib Grafik includen!		PHP Tipps 2007	2	02.01.2007 12:33
Grafik gleich speichern und nicht öffnen	ckrentel	PHP Tipps 2006	1	12.05.2006 17:16
[Erledigt] Grafik in Scheiben schneiden		PHP Tipps 2006	6	02.05.2006 18:23
Text und Grafik zentriert in einer Zeile	php_frage	HTML, Usability und Barrierefreiheit	5	26.04.2006 12:48
Grafik drucken		PHP Tipps 2006	13	24.02.2006 23:48
Dynamischer Text in einer Grafik per Formular einfügen		PHP Tipps 2005-2	2	19.08.2005 00:55
Grafik über mehrere Zellen einer Tabelle	neodrei	HTML, Usability und Barrierefreiheit	9	18.08.2005 19:26
in zelle oben text und unten grafik am rand	janni	HTML, Usability und Barrierefreiheit	4	29.06.2005 23:35
Grafik, Kurvendiagramm	Sonja	PHP Tipps 2005	2	24.01.2005 21:06
[Erledigt] Grafik erzeugen		PHP-Fortgeschrittene	1	25.11.2004 18:26
Grafik ausgeben -> nur Zeichnesalat		PHP Tipps 2004	18	01.09.2004 16:03
Grafik in Grafik einfügen	Filewalker	PHP Tipps 2004	3	20.06.2004 14:04

28.12.2008, 21:39
vyo Benutzer Registriert seit: 13.11.2008 Beiträge: 47	Blinkende Grafik? Hallo, ich habe bei bestimmter Eingabe eines Passwortes ein Bild, das geladen wird und die Sicherheitsstufe darstellt. Jetzt habe ich aber das Problem, dass (manchmal) diese Grafik scheinbar immer neu lädt, weil die Grafik blinkt. Könnte natürlich auch was anderes sein, aber ich schätze da fehlt mir irgendeine Eingabe das zu verhindern. Was könnte grundsätzlich das Problem dafür sein? Ich hab ein bisschen gegoogelt und zu dem Thema was von JS-Preload gelesen... hat das was damit zu tun, dass ich die Bilder bereits im Head-Teil "preloaden" sollte? LG


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

28.12.2008, 22:57
David Erfahrener Benutzer Registriert seit: 05.09.2007 Beiträge: 5.044	Kann es sein, dass Du die Grafiken -zig Mal pro Sekunde austauschst? Wenn ich mich recht erinnere, hattest Du doch nur drei verschiedene Stufen (niedrig, mittel, hoch) und auch nur drei Bilder.

28.12.2008, 23:59
David Erfahrener Benutzer Registriert seit: 05.09.2007 Beiträge: 5.044	Und wie oft wird das nun alles ausgeführt? Wirklich nur ein Mal je Tastendruck? Wie äußert sich das "Blinken"? Ein regelmäßiges/ständiges Flackern? Ein Mal pro Grafik?

29.12.2008, 00:25
vyo Benutzer Registriert seit: 13.11.2008 Beiträge: 47	Ja, jede Eingabe lässt die Grafik irgendwie blinken. Ich vermute gerade aber auch, dass vielleicht der <div>-Tag für dieses blinken verantwortlich ist, weil der Text unter der Grafik auch von unten nach oben zu springen scheint für einen kurzen Moment, aber ich bin mir wie gesagt echt unsicher. Es flackert nur bei einer Eingabe. Wenn man nichts tut, ist alles in Ordnung. Ich weiß aber nicht woran das liegen könnte. Wie könnte ich denn zum Test, ob es dann klappt, bewerkstelligen, dass die Grafik nur dann geladen wird, wenn tatsächlich ein Wechsel vorliegt? Also, wenn je Eingabe nicht die selbe Grafik geladen wird. Geändert von vyo (29.12.2008 um 00:57 Uhr).

29.12.2008, 01:30
David Erfahrener Benutzer Registriert seit: 05.09.2007 Beiträge: 5.044	doppelt

29.12.2008, 13:22
vyo Benutzer Registriert seit: 13.11.2008 Beiträge: 47	Hey, erneut vielen Dank für Deine Mühe! Ich weiß nicht woran es liegt, aber manchmal blinkt die Grafik garnicht, dafür aber wenn ich es irgendwie 3min später teste wieder. Ich habe deine Variante probiert, aber es leider irgendwie nicht hinbekommen, das mit meiner zu verbinden, da mein Script ja noch das "Rating" überprüft. Ich kann es ja einfach mal posten: PHP-Code: <script type="text/javascript" language="JavaScript"> <!-- function fnCheck(){ if (document.formpass.txtPass.value.length >=3){ window.setTimeout(fnPasswdCheck(),1000) }else{ document.getElementById('passlevel').innerHTML = '<img src="img/icons/safety_low.gif">'; } } function fnPasswdCheck() { var pass = document.formpass.txtPass.value; //Password in Variable speichern var rating = 100; //Variable um Sicherheitsrating zu speichern var optimalPasswordLength = 10; var numericChar = false; //Variable fuer Zahlen var bigChar = false; //Variable fuer Grossbuchstaben var smallChar = false; //Variable fuer Kleinbuchstaben var specialChar = false; //Variable fuer Sonderzeichen var passwordLength = pass.length; //Variable um Passwordlange zu speichern //pro fehlendem Zeichen auf optimale Laenge werden vom Rating 5 Punkte abgezogen var dif = optimalPasswordLength-passwordLength; if (dif>0){ rating = rating - (dif*5); } //Ueberpruefen for(var i=0;i<passwordLength;i++) { var ascii = pass.charCodeAt(i); if (ascii>=48 && ascii<=57){ numericChar=true; //Speichern wenn ein Zahlenwert vorkommt }else if (ascii>=65 && ascii<=90){ bigChar=true; //Speichern wenn ein Grossbuchstabe vorkommt }else if (ascii>=97 && ascii<=122){ smallChar=true; //Speichern wenn ein Kleinbuchstabe vorkommt }else if (ascii>=32 && ascii<=126){ specialChar=true; //Speichern wenn ein Sonderzeichen vorkommt } } //Jeweils Punkte vom Rating abziehen wenn keine Klein-, Großbuchstaben, Sonderzeichen, Zahlen enthalten sind if(!smallChar) { rating -=12; } if(!bigChar) { rating -=12; } if(!numericChar) { rating -=12; } if(!specialChar) { rating -=12; } //Sicherheitsstufe anzeigen if (rating <50){ document.getElementById('passlevel').innerHTML = '<img src="img/icons/safety_low.gif" width="131" height="14">'; document.getElementById('passlevel_txt').innerHTML = 'niedrig'; }else if (rating <70 && pass.length<19){ document.getElementById('passlevel').innerHTML = '<img src="img/icons/safety_middle.gif" width="131" height="14">'; document.getElementById('passlevel_txt').innerHTML = 'mittel'; }else if (rating >80 \|\| pass.length>19){ document.getElementById('passlevel').innerHTML = '<img src="img/icons/safety_high.gif" width="131" height="14">'; document.getElementById('passlevel_txt').innerHTML = 'hoch'; } } //--> </script> Und HTML: PHP-Code: <table width="646" border="0" cellspacing="0" cellpadding="0"> <form name="formpass" method="post" action=""> <tr> <td width="246"> Passwort: <input type="password" size="25" maxlength="50" name="txtPass" onKeyUp="fnCheck()"> </td> <td id="passlevel" width="144"><img src="img/icons/safety_none.gif"></td> <td id="passlevel_txt" width="256">keine</td> </tr></form> </table> Jetzt habe ich zusätzlich einen weiteren Fehler gefunden: Wenn ich z.B. eine richtig lange Eingabe mache und diese dann mit einem mal lösche (also ganz schnell mit gedrückter Taste und nicht mit einzelnem Tastendruck), passiert es, dass der Text hierbei z.B. von "hoch" nicht mehr "auf "niedrig" springt, sondern "hoch" bleibt. Woran könnte das denn liegen?

29.12.2008, 14:54
Bleda Neuer Benutzer Registriert seit: 27.12.2008 Beiträge: 23	Wenn du die Bilder nicht preloadest und auf diese Art austauscht, müssen sie immer erst noch geladen werden, bevor sie angezeigt werden. Das resultiert dann darin, dass man kurz kein Bild sieht, solange bis das neue geladen ist. Dass es manchmal schneller geht liegt wohl am Browser-Cache. Also entweder du lädst die Bilder schon im voraus, oder du packst alle Bilder in eins, bindest das als Hintergrund (eines DIVs oder so) ein und verschiebst dann den Hintergrund per JS so, dass man den richtigen Ausschnitt sieht. Und wegen dem Löschen: Probier doch mal onChange anstatt onKeyUp. Alles Tipps ohne Gewähr. Ich hoffe es hilft.