Bild anzeigen mit Javascript

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas
programtools

programtools hat kostenlosen Webspace.
14:22, 26.4.2011
Hi
klingt leichter als gedacht.
Ich möchte ins Browserfenster ein Bild laden. Das Bild soll genau in der Mitte also auf x und y Achse zentriert sein.
Bisher habe ich folgenden Ansatz mir gebastelt:
```
function previewimg_open(src){
    var box = document.getElementById('img_previev_picbx');
    var pic = document.getElementById('img_previev_picture');

    pic.src = '/bilder/bildxy.jpg';

    pic.style.marginLeft = (screen.width / 2 - pic.offsetWidth / 2) + 'px';
    pic.style.marginTop = (screen.height / 2 - pic.offsetHeight/ 2) + 'px';
}
```
DAs würde klappen, würde das Bild nicht so lange zum Laden brauchen und der Browser daher pic.offsetWidth bzw pic.offsetHeight vom vorherigen Bild nimmt.

Meine Frage ist nun, wie ich eine Funktion (zb die Funktion, die dann das Bild positioniert) erst dann aufrufen kann, wenn das Bild geladen ist?

Ich hoffe ihr könnt mir helfen! MFG & frohe Ostern
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
sneppa

sneppa hat kostenlosen Webspace.

14:26, 26.4.2011
Da wird dir selfhtml weiterhelfen:
http://de.selfhtml.org/javascript/objekte/images.htm
Bzw:
http://www.techrepublic.com/article/preloading-and-the-javascript-image-object/5214317

Das Stichwort ist hier onLoad :)

PS: Hab mal die Tippfehler aus dem Titel entfernt.

Beitrag zuletzt geändert: 26.4.2011 14:26:58 von sneppa
Autor dieses Themas
programtools

programtools hat kostenlosen Webspace.

18:30, 27.4.2011
mmm aber irgendwie habe ich auf den Seiten jetzt nichts neues gefunden. Ich möchte die Bilder nicht vorladen, sondern warten bis sie geladen sind. MFG
simuliertes

simuliertes hat kostenlosen Webspace.

19:10, 27.4.2011
Der gedanke dabei ist das javascript ja erst weiß wie hoch/breit das Bild ist wenn es geladen wurde.
Also muss das Bild mit Javascript vorgeladen werden.

Schritt für Schritt:

-Bild laden mit Img = new Image();
-Erst weitermachen wenn das Bild geladen ist (Img.onLoad=previewimg_open(src);)
-Bildgröße ermitteln (var imgWidth = Img.offsetWidth; var imgHeight = Img.offsetHeight)
-Bild Positionieren und Zeigen

Autor dieses Themas

12:58, 28.4.2011

Danke, aber irgendwie will das so nicht sauber klappen.
Ich musste jetzt eine Verzögerung à la 2 sec einbauen, aber bei einem lahmen Browser kann das schnell zum Verhängniss werden, weil dann auch nach den 2 sec noch nicht geladen ist. Ich poste mal mein script bis jetzt damit ihr euch ein besseres Bild machen könnt:

function previewimg_open(src){
    obj_blending('img_previev',1);
    var box = document.getElementById('img_previev_picbx');
    var pic = document.getElementById('img_previev_picture');

    var scwidth = window.innerWidth || (window.document.documentElement.clientWidth || window.document.body.clientWidth);
    var scheight = window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight);


    //pic.src = "grafiken/img_loading.gif";
    box.style.width = 50 + 'px';
    box.style.height = 50 + 'px';
    box.style.marginLeft = (scwidth / 2 - 50 / 2) + 'px';
    box.style.marginTop = (scheight / 2 - 50 / 2) + 'px';

    var pimg = new Image();
    pimg.src = 'imgkonvert.php?src=' + src + '&w=700&h=600';
    pimg.onLoad = previewimg_size(pimg.src);
}

function previewimg_size(src){
    var box = document.getElementById('img_previev_picbx');
    var pic = document.getElementById('img_previev_picture');
    var scwidth = window.innerWidth || (window.document.documentElement.clientWidth || window.document.body.clientWidth);
    var scheight = window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight);



    window.setTimeout(function(){
    pic.src = src;
    document.getElementById('wb1').innerHTML = pic.src + " <br/> w: " + pic.offsetWidth + " <br/> h: " + pic.offsetHeight;

    box.style.width = pic.offsetWidth  + 'px';
    box.style.height = pic.offsetHeight  + 'px';
    box.style.marginLeft = (scwidth / 2 - pic.offsetWidth / 2) + 'px';
    box.style.marginTop = (scheight / 2 - pic.offsetHeight / 2) + 'px';
    }, 2000);
}

MFG

simuliertes

simuliertes hat kostenlosen Webspace.

17:04, 29.4.2011
Schau an.
Ich hatte das Problem auch mal und es auch mit Zeitverzögerung "gelöst".
Da Dir das auch passiert mal kurz gegoogelt und das hier gefunden:
http://forum.de.selfhtml.org/archiv/2010/7/t199106/

Lösung:
pimg.onload = previewimg_size;

sollte funktionieren ,hab's aber nicht getestet.
src müsstest Du dann wohl als globale variabel übergeben.

#1 Ohne Klammern
#2 "L" klein schreiben.

irgendwas.onload = anyfunction;
== starte die funktion NACHdem geladen wurde.

irgendwas.onload = anyfunction();
== gebe SOFORT das Ergebniss der Funktion an den onload-handler (wodurch natürlich die Funktion auch sofort ausgeführt wird)

Sorry also für die Fehlerhafte Beratung.
Hab jetzt auch wieder was gelernt. Nicht schlecht

Beitrag zuletzt geändert: 29.4.2011 17:12:54 von simuliertes
Autor dieses Themas
programtools

programtools hat kostenlosen Webspace.
17:31, 29.4.2011
Hallo.
Ja vor genau 2 Minuten sind mir diese beiden Fehler aufgefallen. 1. ich habe das große L gemacht, was tatsächlich ein Fehler ist.
Und ich habe Parameter übergeben. Die Parameter müssen aber übergeben werden, daher habe ich das ganze so gelöst:
```
img.onload = function(){ previewimg_size(parameter); }
```
Vielen Dank & MFG
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city