Webdesign, Tutorials und mehr - Webmasterpro.de

Vorladen von dynamisch erstellten Bildern

Nightmare, am Mittwoch den 18.01.2012 um 09:56:22

Hallo,

ich habe folgendes Problem:

- Ein PHP Script erzeugt ein dynamisches Bild, welches aber recht aufwendig zu zeichnen ist und daher eine gewissen Zeit in Anspruch nimmt!

- Auf der Zielseite habe ich einen Image Preloader, der das Bild erst komplett empfangen soll und dann erst anzeigen soll.

Gelöst hab ich das ganze nach dem Standardweg:

Zur kurzen Erklärung: Das Image "wait" liegt über dem Image "dest" und zeigt eine ladeanimation an (.gif datei) und soll komplett durch das fertige bild ersetzt werden.

Mit dieser Lösung habe ich aber das Problem, das mein "ladebild" nach 10 sec. verschwindet, das neue Bild aber wieder ca. 10 sec. braucht um komplett dargestellt zu werden!

Kann ich diesen Effekt irgendwie umgehen?

Vielen Dank im voraus

Jannik Zschiesche, am Donnerstag den 19.01.2012 um 11:30:22

Hallo,

inwiefern verschwindet das Bild nach 10 Sekunden? Blendest du es aus?

NINJA6, am Dienstag den 07.02.2012 um 14:43:01

Man könnte z.B. auch das Programm jQuery verwenden, das ist ziemlich unkompliziert und funktioniert super. Da kann Menüs und bewegte Bilder sehr umfangreich einstellen. Hier mal ein Beispiel, wie sowas aussehen kann. (viele bewegte Bilder)

Guck mal hier: http://jquery.com/

Jannik Zschiesche, am Dienstag den 07.02.2012 um 18:51:15

Wenn du keinen Spam + Linkbuilding posten würdest, hättest du gesehen, dass er bereits jQuery verwendet hättest.

Chris Wiese, am Montag den 13.02.2012 um 11:15:27

Ich habe vor kurzem etwas ähnliches (zumindest aus js Seite) gemacht. Dabei habe ich eine json Datei per php übergeben bekommen mit links zu bildern und diese per jquery preloaded und bild für bild in einem slider dargestellt:

hier der Link:
http://oldenburger-pferde.net/cms/front_content.php?idcat=110

hier das Script:
http://oldenburger-pferde.net/cms/js/auktslider.js

Der wesentliche Unterschied zu deinem Script ist, dass ich das Bild erst ins DOM der Seite einbinde und den Load dann per ID aufrufe

1
2
3
4
5

$('<img>').attr('src',imgSrc).attr('id','preloader_'+siLoad.actNr).css({'display':'none'});
                               holder.appendTo('body');
                               $('#'+'preloader_'+siLoad.actNr).load(function(){
                                   executeMe();
                               });

Ich war jetzt zu faul eine Loading animation einzubinden doch wäre im grunde gar kein problem.

lg

Chris

Jannik Zschiesche, am Montag den 13.02.2012 um 15:17:47

Deine Variante funktioniert nur "zufällig".

Sobald du

1

$('<img>').attr('src',imgSrc)

aufrufst, wird das Bild bereits geladen (also sogar noch deutlich bevor du es in den DOM einfügst). Wenn das Laden des Bildes nun schneller geschieht als die Code-Ausführung (z.B. dank Caching o.ä.) bis zu .load() wird deine .load()-Methode nie aufgerufen.

Chris Wiese, am Dienstag den 14.02.2012 um 12:14:00

hmm, das ist noch nie mit diesem script passiert, eine Variante die ich sonst genutzt habe ist:

1
2
3
4
5
6
7
8

  var pic = new Image();
               pic.src= imgSrc;
                if(pic.complete){
                imgExec()
                }
                else{
                pic.onload=imgExec
               }

das aber nur als der IE mit load rumgezickt hat, aus genau dem Grund den du genannt hast.

Jannik Zschiesche, am Dienstag den 14.02.2012 um 16:06:41

Da hast du wieder das Problem, dass es genau dann fertig wird, wenn du deinen else-Zweig betrittst (und dann wieder nichts ausführst).

Die Variante, die wirklich immer funktioniert:

1
2
3

var img = new Image();
img.onload = callback;
img.src = "test.jpg";

bzw.

1

$("<img>").load(function () { /* ... */}).attr("src", "test.jpg");