Tweet
js: dynamische Bilder abfragen
Hallo Ihr Lieben,
da ich hier immer den nötigen Denkanstoss bekomme, wende ich mich heute mal wieder an die Profis hier. Bin über jede Hilfe dankbar.
Hintergrund: (m)eine Webseite die ein Bild darstellen soll, und ein externer Server der das Bild in einer unvorhersagbaren Zeit erstellt.
Das script an dem ich arbeite, soll nun das von einem Server erzeugte jpg-Bild auf existenz prüfen.
Meine bisherige Lösung ist seeeeeehr einfach, mein script wartet 12sec und blendet das jpg ein.
Da das Bild innerhalb max. 15 sekunden gerendert ist, ist 12sec eine zeit die 95% der Bilder dann auch darstellt, ausser es dauert eben länger, und das ist auch der Haken an der ganzen Geschichte.
Nun habe ich schon einiges probiert und auch mich mit ein paar Leuten ausgetauscht, nur die Lösungen waren alle nicht optimal.
Meine 1. Lösung
- user fordert bild an -> redirect auf Warteseite -> 12sec -> redirect auf Anzeigeseite. klappt zu 95%
Meine 2. Lösung
-user fordert Bild an -> redirect auf "neue Seite" ->javascript prüft img.width > 30 -> wenn nein page-reload, wenn ja Bild anzeigen.
das macht imho einfach keinen guten eindruck wenn die Seite 4-6 mal reloaded wird und immer das klacken zu hören ist etc. auch das "aufflackern" der Page wirkt billig.
Meine 3. Lösung ( und da brauch ich hilfe )
-user fordert Bild an -> das jetzige script :
es soll in einer Schleife prüfen ob img.width grösser dem IE-Platzhalter für "keine grafik gefunden".
also das Bild ist auch beim ausführen der "user-eingabe-seite" noch nicht auf dem Webspace, und wird nun innerhalb der nächsten 15sec gerendert.
skript bisher:
<html>
<head>
</head>
<body>
<script type="text/javascript">
var zaehler = 0;
var img = new Image();
while (img.width <= 40 && zaehler <= 20) {
var img = new Image();
img.src = "testbild.jpg";
document.write("Bild noch nicht da...<br>");
//debug alert
alert ( img.width + " " + img.height );
zaehler++;
}
img.onload = function () { tu was damit die grafik angezeigt wird;};
</script>
</body>
</html>
Das Problem an der Geschichte ist nun: ich habe zu wenig Ahnung von JS, und ich denke das beim Ausführen der HTML/JS Script Seite, der "IST"-Zustand vom externen Server genommen wird, also quasi wenn das Bild da nicht da ist kann ich so viele Schleifen durchlaufen wie ich will, das ergebnis ( jpg-datei nicht da ) ändert sich nicht. mache ich einen reload der seite, findet er ( natürlich ) die Datei.
Ich hoffe das Ihr mein Problem im Ansatz erkennt. Eine PHP-Geschichte geht nicht ( da hätte ich auch die Lösung) , auch cgi etc kann ich nicht nehmen. es muss in JS sein.
Es muss doch aber einen Weg geben, ohne die Page jede Sekunde zu reloaden und dann zu checken. oder aber eine feste Zeit warten.
Die Zeit zum rendern ist leider nicht vorhersehbar, da es immer auf den derzeitigen Auslastungsfaktor des Servers ankommt, tagsüber max15sec nachts max5sec.
Ich bedanke mich schonmal im vorraus fürs lesen dieses Textes und würde mich über jede Art von Hilfe erkenntlich zeigen
viele grüsse vom nachdenkenden strassencoder
da ich hier immer den nötigen Denkanstoss bekomme, wende ich mich heute mal wieder an die Profis hier. Bin über jede Hilfe dankbar.
Hintergrund: (m)eine Webseite die ein Bild darstellen soll, und ein externer Server der das Bild in einer unvorhersagbaren Zeit erstellt.
Das script an dem ich arbeite, soll nun das von einem Server erzeugte jpg-Bild auf existenz prüfen.
Meine bisherige Lösung ist seeeeeehr einfach, mein script wartet 12sec und blendet das jpg ein.
Da das Bild innerhalb max. 15 sekunden gerendert ist, ist 12sec eine zeit die 95% der Bilder dann auch darstellt, ausser es dauert eben länger, und das ist auch der Haken an der ganzen Geschichte.
Nun habe ich schon einiges probiert und auch mich mit ein paar Leuten ausgetauscht, nur die Lösungen waren alle nicht optimal.
Meine 1. Lösung
- user fordert bild an -> redirect auf Warteseite -> 12sec -> redirect auf Anzeigeseite. klappt zu 95%
Meine 2. Lösung
-user fordert Bild an -> redirect auf "neue Seite" ->javascript prüft img.width > 30 -> wenn nein page-reload, wenn ja Bild anzeigen.
das macht imho einfach keinen guten eindruck wenn die Seite 4-6 mal reloaded wird und immer das klacken zu hören ist etc. auch das "aufflackern" der Page wirkt billig.
Meine 3. Lösung ( und da brauch ich hilfe )
-user fordert Bild an -> das jetzige script :
es soll in einer Schleife prüfen ob img.width grösser dem IE-Platzhalter für "keine grafik gefunden".
also das Bild ist auch beim ausführen der "user-eingabe-seite" noch nicht auf dem Webspace, und wird nun innerhalb der nächsten 15sec gerendert.
skript bisher:
<html>
<head>
</head>
<body>
<script type="text/javascript">
var zaehler = 0;
var img = new Image();
while (img.width <= 40 && zaehler <= 20) {
var img = new Image();
img.src = "testbild.jpg";
document.write("Bild noch nicht da...<br>");
//debug alert
alert ( img.width + " " + img.height );
zaehler++;
}
img.onload = function () { tu was damit die grafik angezeigt wird;};
</script>
</body>
</html>
Das Problem an der Geschichte ist nun: ich habe zu wenig Ahnung von JS, und ich denke das beim Ausführen der HTML/JS Script Seite, der "IST"-Zustand vom externen Server genommen wird, also quasi wenn das Bild da nicht da ist kann ich so viele Schleifen durchlaufen wie ich will, das ergebnis ( jpg-datei nicht da ) ändert sich nicht. mache ich einen reload der seite, findet er ( natürlich ) die Datei.
Ich hoffe das Ihr mein Problem im Ansatz erkennt. Eine PHP-Geschichte geht nicht ( da hätte ich auch die Lösung) , auch cgi etc kann ich nicht nehmen. es muss in JS sein.
Es muss doch aber einen Weg geben, ohne die Page jede Sekunde zu reloaden und dann zu checken. oder aber eine feste Zeit warten.
Die Zeit zum rendern ist leider nicht vorhersehbar, da es immer auf den derzeitigen Auslastungsfaktor des Servers ankommt, tagsüber max15sec nachts max5sec.
Ich bedanke mich schonmal im vorraus fürs lesen dieses Textes und würde mich über jede Art von Hilfe erkenntlich zeigen
viele grüsse vom nachdenkenden strassencoder
Moderator
Aber schön ist das nicht.
Kommentar