Mastershrimp: Bildgröße im Vorraus bestimmen: Klappt nur bei Cache?

Hallo!

Ich habe gerade folgendes Script geschrieben:

<script type="text/javascript">
<!--
 function show_image(window_href)
  {
   bild = new Image();
   bild.src = window_href;

if(navigator.appName == "Microsoft Internet Explorer")
    {
     breite = bild.width + 20;
     hoehe = bild.height + 20;
    }
   else
    {
     breite = screen.width-100;
     hoehe = screen.height-100;
    }

window_properties = "'toolbar=no,resizable=yes,status=no,menubar=no,width=" + breite + ",height=" + hoehe + "'";
   alert(hoehe + " " + breite + " " + window_href + " " + window_properties);

new_window = window.open(window_href,'Bild',window_properties);

bild = "";
  }
//-->
</script>

Dass das Ganze nur im IE so wirklich funktioniert ist schon ok. Sind ja die meisten. Und der Rest hat halt ein großes Fenster.

Aber ich habe gerade festgestellt, dass das Ganze (= Fenstergröße anpassen) nur dann funktioniert, wenn die Bilder schonmal aufgerufen wurden und folglich aus dem Cache kommen...

Muss ich jedes Bild vorher einzeln mit new Image() vorladen, um das zu verhindern? Reicht das nicht, die "new Image()"-Sache in die Funktion variabel einzubauen, wie ich es oben tat?

Danke schonmal für die Antworten

Gruß

Mastershrimp

  1. Moin!

    <script type="text/javascript">
    <!--
     function show_image(window_href)
      {
       bild = new Image();

    Hier legst du ein neues Bildobjekt an.

    bild.src = window_href;

    Hier weist du den Browser an, es vom Server anzufordern.

    if(navigator.appName == "Microsoft Internet Explorer")
        {
         breite = bild.width + 20;
         hoehe = bild.height + 20;

    Und wenige Microsekunden später ist das Bild schon da - vollkommen unter Mißachtung jeglicher Bandbreite des Users etc. Toll! So schnell will ich die Bilder auch mal geladen kriegen. Einfach mit Javascript postulieren: Bild, sei da! Und schon gehorcht es, und fliegt in Nullzeit auf den Rechner.

    Aber ich habe gerade festgestellt, dass das Ganze (= Fenstergröße anpassen) nur dann funktioniert, wenn die Bilder schonmal aufgerufen wurden und folglich aus dem Cache kommen...

    Der Cache kriegt es als einziger hin, ein Bild in Nullkommanichts in den Speicher zu laden. Alle anderen Situationen erfordern es, dass du die Ladezeit des Bildes abwartest, bevor du irgendetwas machst.

    Diese Ladezeit kann von wenigen Millisekunden (kaum benutztes Intranet) bis hin zu mehreren Minuten (extrem lahmes Modem) Zeit benötigen.

    Du wirst nicht umhin kommen, auf das Fertigladen zu warten. Sinnvollerweise nutzt du einen onload-Event dafür. Alternativ kannst du natürlich auch mit den setTimeout/setInterval-Methoden arbeiten und regelmäßig prüfen, ob dein Bild schon eine Größe zurückgibt.

    - Sven Rautenberg

    --
    "Habe den Mut, dich deines eigenen Verstandes zu bedienen!" (Immanuel Kant)
    1. Einfach mit Javascript postulieren: Bild, sei da! Und schon gehorcht es, und fliegt in Nullzeit auf den Rechner.

      Oh. Ok. Daran hätte ich denken können.

      Doch setze ich diese neuen Vorschläge konkret in die Tat um? Soll ich erst ein Fester öffnen, und es dann scriptgesteuert wieder schließen, nur um es dann wieder angepasst zu öffnen? Dann kann ich es auch direkt sein lassen. Wo soll der onLoad-Handler hin?

      Die andere Lösung mit dem setInterval()/setTimeout() sieht da schon plausibler aus...Hm. Ich prüfe am besten am Anfang des Scripts, ob die Breit != 0 ist, wenn ja, läuft alles so wie vorher ab und wenn nein, breche ich die Funktion ab (mit "break"? Geht glaub ich nicht, oder?) und rufe sie nach 2 Sekunden wieder auf...
      Könnte das so klappen? Ich versuchs mal...

      Danke schonmal für deine Tipps!

      Gruß

      Mastershrimp

      1. So. Hier mein neuster Versuch:

        <script type="text/javascript">
        <!--
         function show_image(window_href)
          {
           bild = new Image();
           bild.src = window_href;

        breite = bild.width + 20;
           hoehe = bild.height + 20;

        if(bild.width==0)
            {
             alert("Bild wird geladen. Bitte 2 Sekunden warten. \nFalls du einen PopUp-Blocker aktiviert hast, deaktiviere ihn bitte, da sonst die Bilder nicht angezeigt werden können.");
             bild_laden = setTimeout("warten('" + window_href + "')",2000);
            }
           else
            {
             window_properties = "'toolbar=no,resizable=yes,status=no,menubar=no,width=" + breite + ",height=" + hoehe + "'";
             new_window = window.open(window_href,'Bild',window_properties);
             bild = "";
            }
          }

        function warten(param)
          {
           show_image(param);
          }
        //-->
        </script>

        Das Ganze scheint auch zu funktionieren...Habe es im IE 6 und in Mozilla Firebird 0.7 getestet. Allerdings sehe ich in Zukunft Schwierigkeiten bei PopUp-Blockern - die verhindern nämlich das Aufbauen des Fensters. Momentan konnte ich dem nur mit einer Meldung entgegenwirken.

        Beim IE hatte ich das Problem, dass die Bilder nicht so ganz aus dem Cache wollten...kannst du das Ganze mal unter http://design.mastershrimp.com/works.html testen?

        Danke!

        Gruß

        Mastershrimp

        1. Moin!

          Das Ganze scheint auch zu funktionieren...Habe es im IE 6 und in Mozilla Firebird 0.7 getestet.

          Die Aussage ist korrekt: Es _scheint_ zu funktionieren. Unter Opera 6 erzeugst du damit eine Endlosschleife von Alerts, die sich nicht abbrechen läßt außer durch Schließen des Fensters.

          Ist also nicht wirklich der Hit. Denn wenn dein Bild nie geladen wird (Gründe dazu gibts reichlich), oder wenn der Browser die Bildbreite nicht übergibt, hast du ein Problem.

          Allerdings sehe ich in Zukunft Schwierigkeiten bei PopUp-Blockern - die verhindern nämlich das Aufbauen des Fensters. Momentan konnte ich dem nur mit einer Meldung entgegenwirken.

          Das Problem hast du so oder so. Ich würde es programmtechnisch ignorieren. Wer Popups blockt, weiß das. Es macht Sinn, auf der Hauptseite einen Text zu haben, dass die Links als Popup geöffnet werden - das reicht dann aber auch.

          - Sven Rautenberg

          --
          "Habe den Mut, dich deines eigenen Verstandes zu bedienen!" (Immanuel Kant)
          1. Die Aussage ist korrekt: Es _scheint_ zu funktionieren. Unter Opera 6 erzeugst du damit eine Endlosschleife von Alerts, die sich nicht abbrechen läßt außer durch Schließen des Fensters.

            Oha. Was mach ich denn da jetzt? Per if-Abfrage nur die Mozilla's (=Netscape) und IE's rausfiltern und dem Rest eine Standartgröße verpassen? Ist navigator.appName bei Opera nicht auch "Netscape"? Dann _kann_ ich den ja gar nicht rausfiltern, oder?

            Was mach ich denn jetzt am besten? Soll ichs ganz sein lassen und nur für die IE's das angepasste Fenster anbieten?

            1. Moin!

              Was mach ich denn jetzt am besten? Soll ichs ganz sein lassen und nur für die IE's das angepasste Fenster anbieten?

              Ich würde mal sagen: Gar kein angepaßtes Fenster anbieten.

              Denn ehrlich gesagt: Wenn ich mir die großen Versionen einer Bildergalerie ansehen will, dann erfreut _mich persönlich_ eigentlich immer ein simpler Link auf das nackte Bild am meisten. Wenn es unbedingt sein muß: target="_blank". Oder du benutzt ein passendes Programm und läßt dir für jedes Bild passende HTML-Seiten erstellen. Für Windows gibts dafür beispielsweise "HomeGallery" kostenlos. Das skaliert die jedes beliebige Bild auf einheitliche Größe, und erstellt Übersichtsseiten und Bilderseiten inklusiver fast aller möglichen Zusatzinformationen, die man sich für ein Bild denken kann.

              - Sven Rautenberg

              --
              "Habe den Mut, dich deines eigenen Verstandes zu bedienen!" (Immanuel Kant)
              1. Denn ehrlich gesagt: Wenn ich mir die großen Versionen einer Bildergalerie ansehen will, dann erfreut _mich persönlich_ eigentlich immer ein simpler Link auf das nackte Bild am meisten. Wenn es unbedingt sein muß: target="_blank".

                Hmm. Aber toolbar, statuszeile, etc. können da schon sehr schnell überflüssig werden...

                Ich glaube ich machs so:

                • IE-Benutzer kriegen ein angepasstes Fenster (scheint ja problemlos zu klappen)
                • Alle anderen Browser kriegen ein größenverstellbares popup-fenster ohne toolbar etc. in einer Standartgröße
                • Alle Browser ohne JS kriegen per "return false" ein Blanko-Fenster.

                Was meinst du? Ist doch die userfreundlichste Methode (mal abgesehen von deiner), oder?

                Danke schonmal für die schnellen Antworten!

                Gruß

                Mastershrimp

                1. hi,

                  Hmm. Aber toolbar, statuszeile, etc. können da schon sehr schnell überflüssig werden...

                  _stören_ sie denn etwa automatisch, nur weil sie vielleicht(!) nicht _gebraucht_ werden?

                  m.E. durchaus nicht.

                  gruss,
                  wahsaga

                  1. m.E. durchaus nicht.

                    Grundsätzlich hast du recht. Aber wenn das Bild schon alleine 1024x768px groß ist, wird das Fenster durch toolbar&co nur unnötig aus dem Bildschirm geschoben. Und wenn man's nicht braucht, kann man's auch lassen.

                    1. hi,

                      Aber wenn das Bild schon alleine 1024x768px groß ist, wird das Fenster durch toolbar&co nur unnötig aus dem Bildschirm geschoben.

                      gerade dann machst du mir mit deinem popup in der "richtigen" grösse aber erst recht probleme.

                      ich nutze den opera, dort habe ich bei einer auflösung von 1024x768 nicht mal dann den platz zur verfügung, ein bild in dieser grösse ganz anzusehen, wenn du ein popup ohne toolbar etc. öffnest (die toolbar "stört" tabbed-browsing benutzer ja sowieso weniger, weil sie aus ihrer sicht nicht zum einzelnen tab gehört).
                      jetzt öffnest du also dein popup, welches gross genug für ein bild mit den maßen 1024x768 ist.
                      scrollbars wird es keine haben, da du es ja in der "richtigen" grösse geöffnet hast.
                      also bleibt mir nut noch das verschieben des popups im tab-anzeigebereich meines browsers, was aber bei einem so grossen popup auch nicht so klappen wird, dass ich das ganze bild sehen kann.

                      zum glück kann ich im opera die anzeige leicht aus dem popup "befreien", in dem ich auf dessen titel doppelklicke, dann habe ich das bild in einem "normalen" tab, und kann auch wieder scrollen.

                      ein gefallen hast du mir dann mit deiner umständlichen methode trotzdem nicht getan ...

                      gruss,
                      wahsaga

                      1. ein gefallen hast du mir dann mit deiner umständlichen methode trotzdem nicht getan ...

                        Ok. Klar.
                        Aber wenn ich noch zusätzlich eine Toolbar hätte, würde das Ganze _noch_ schlimmer werden.

                        Btw.: Ich habe mein Fenster mit "resizable" Rändern versehen. Damit kann man dann das Fenster - falls es einem nicht passt - trotzdem verändern.

                        Gruß

                        mastershrimp

      2. Doch setze ich diese neuen Vorschläge konkret in die Tat um? Soll ich erst ein Fester öffnen, und es dann scriptgesteuert wieder schließen, nur um es dann wieder angepasst zu öffnen? Dann kann ich es auch direkt sein lassen. Wo soll der onLoad-Handler hin?

        Das ist genau die Lösung der wahl.

        Die andere Lösung mit dem setInterval()/setTimeout() sieht da schon plausibler aus...Hm. Ich prüfe am besten am Anfang des Scripts, ob die Breit != 0 ist, wenn

        wieso ist das plausibler?

        onload wird gefeuert wenn das bild fertig geladen ist, alles andere ist nur eine Krücke.
        Was passiert denn, wenn du mal aus versehen das Bild löscht?
        Dann läuft dein Programm unendlich.

        onload ist sehr einfach anzuwenden:
        var img = new Image();
        img.onload = fertig;
        img.src = url;

        function fertig()
        {
         alert('Das Bild:' + this.src + ' ist fertig');
        }

        Das ist wesentlich eleganter, als eine Lösung mit timeout.

        Hier ist ein Skript, was ungefähr das macht was du willst:
        http://home.arcor.de/struebig/js/popup/popup_alt.htm

        Struppi.