Skriptsprachen (PHP, Javascript, etc.) - Forum

Derzeit sind Sie als Gast in unserem Forum aktiv. Für das Schreiben registrieren Sie sich bitte. Unser Forum ist eine Austauschplattform für Webworker zum Kommunizieren, Helfen, Informieren und Hilfe finden. Auf der rechten Seiten finden Sie eine Forenübersicht über alle Bereiche des Webmaster-Forums. Unterhalb finden Sie alle aktuellen Themen.

Diskutieren Sie hier über die serverseitige Skriptsprachen PHP und Python und über dynamische Webseitenerstellung mit Javascript und Ajax.


Nightmare
Beiträge: 1

PN schreiben
Profil ansehen
User ist offline

Vorladen von dynamisch erstellten Bildern

Link zur Antwort auf "Vorladen von dynamisch erstellten Bildern" von Nightmare Nightmare, am Wednesday 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:

var preloadImage = new Image();

$(preloadImage).load(function() {

$("img#wait").hide();

$("img#dest").attr("src", $(this).attr("src")).show();

}).attr("src", pic);

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

Link zur Antwort auf "Vorladen von dynamisch erstellten Bildern" von Jannik Zschiesche Jannik Zschiesche, am Thursday den 19.01.2012 um 11:30:22

Hallo,

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

Link zur Antwort auf "Vorladen von dynamisch erstellten Bildern" von Jannik Zschiesche Jannik Zschiesche, am Tuesday 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
Beiträge: 34

PN schreiben
Profil ansehen
User ist offline
Link zur Antwort auf "Vorladen von dynamisch erstellten Bildern" von Chris Wiese Chris Wiese, am Monday 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

 
JavaScript
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

Link zur Antwort auf "Vorladen von dynamisch erstellten Bildern" von Jannik Zschiesche Jannik Zschiesche, am Monday den 13.02.2012 um 15:17:47
Zitat von: Chris Wiese

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

 
JavaScript
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

Deine Variante funktioniert nur "zufällig".

Sobald du

 
JavaScript
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
Beiträge: 34

PN schreiben
Profil ansehen
User ist offline
Link zur Antwort auf "Vorladen von dynamisch erstellten Bildern" von Chris Wiese Chris Wiese, am Tuesday 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:

 
JavaScript
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.

Link zur Antwort auf "Vorladen von dynamisch erstellten Bildern" von Jannik Zschiesche Jannik Zschiesche, am Tuesday 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:

 
JavaScript
1
2
3
var img = new Image();
img.onload = callback;
img.src = "test.jpg";

bzw.

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