Problem mit dynamischer Bildvorschau

Spider · 28. Mai 2014

Hey Leute!
Dieser Threat ist eher an die Webdesigner und Programmierer gerichtet:

Und zwar hab ich seit einiger Zeit ein mittelgroßes Problem mit der dynamischen Bildvorschau für mein Webinterface, an dem ich seit fast einem Jahr schraube (ist schon fertig und bereits bei einem "Kunden" in Betrieb). Das Problem ist, dass das Bild beim ersten Ausführen des Scriptes nicht angezeigt wird, danach aber alles perfekt funzt. Zudem bekommt es der allseits beliebte Internet Explorer nicht auf die Reihe die URL zu ändern, wenn auf ein anderes Bild geklickt wird. Hier der Code:

JavaScript

<script>
function openImg(path){
delete(pictureViewed);
pictureViewed = new Image(900, 500);
pictureViewed.src = "http://beta.just-different-design.de/interface/php/backstage/php/img/upload/"+path+"";
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)){
var pictureWidth = 900;
var pictureHeight = 500;
alert('Sorry, this preview does not work stable on Internet Explorer.');
} else{
if(pictureViewed.naturalWidth <= 900 && pictureViewed.naturalHeight <= 800){
var pictureWidth = pictureViewed.naturalWidth;
var pictureHeight = pictureViewed.naturalHeight;
} else if(pictureViewed.naturalWidth > 900 && pictureViewed.naturalHeight <= 800) {
var pictureWidth = 900;
var pictureHeight = pictureViewed.naturalHeight / (pictureViewed.naturalWidth / pictureViewed.naturalHeight);
} else if(pictureViewed.naturalWidth <= 900 && pictureViewed.naturalHeight > 800) {
var pictureHeight = 800;
var pictureWidth = pictureViewed.naturalWidth / (pictureViewed.naturalHeight / pictureViewed.naturalWidth);
} else {
var pictureWidth = 900;
var pictureHeight = pictureViewed.naturalHeight / (pictureViewed.naturalWidth / pictureViewed.naturalHeight);
}
}
if(pictureWidth == 0 && pictureHeight == 0){
var div = document.createElement("div");
div.id = "img_container";
div.innerHTML = '<div id="container_nav"><a href="javascript:closeImg();"> <img src="/../images/close.png" /></a></div><table width="900px" height="250px"><tr valign="center"><td><img src="/../images/warning.png" /><br />Error while loading image: '+path+'<br /><a href="javascript: openImage();">Try again</a></td></tr></table>';
document.body.appendChild(div);
$( "#img_container" ).stop().animate({marginTop: "120px", opacity: "1"}, 200);
$( "#img_container" ).css({marginLeft: "-450px", backgroundColor: "#555555", height: "250px", width: "900px"});
$( "#container_nav" ).css({marginLeft: "-450px"});
var div2 = document.createElement("div");
div2.id = "img_background";
div2.innerHTML = '';
document.body.appendChild(div2);
$( "#img_background" ).stop().animate({opacity: "0.5"}, 200);
$( "#container_nav" ).stop().animate({marginTop: "120px", opacity: "0.5"}, 200);
$( "#container_nav" ).css({width: "900px"});
setTimeout(function(){
$( "#container_nav" ).animate({opacity: "0.3"});
}, 800);
document.getElementById("img_container").style.display = "block";
document.getElementById("img_background").style.display = "block";
} else {
var div = document.createElement("div");
div.id = "img_container";
div.innerHTML = '<img width="'+pictureWidth+'px" height="'+pictureHeight+'px" id="img_viewed" src="'+pictureViewed.src+'" /><div id="container_nav"><a href="javascript:closeImg();"> <img src="/../images/close.png" /></a></div>';
document.body.appendChild(div);
$( "#img_container" ).stop().animate({marginTop: "120px", opacity: "1"}, 200);
$( "#img_container" ).css({marginLeft: "-"+pictureWidth / 2+"px"});
$( "#container_nav" ).css({marginLeft: "-"+pictureWidth / 2+"px"});
var div2 = document.createElement("div");
div2.id = "img_background";
div2.innerHTML = '';
document.body.appendChild(div2);
$( "#img_background" ).stop().animate({opacity: "0.5"}, 200);
$( "#container_nav" ).stop().animate({marginTop: "120px", opacity: "0.5"}, 200);
$( "#container_nav" ).css({width: ""+pictureWidth+"px"});
setTimeout(function(){
$( "#container_nav" ).animate({opacity: "0.3"});
}, 800);
document.getElementById("img_container").style.display = "block";
document.getElementById("img_background").style.display = "block";
}
$( "#container_nav").mouseover(
function (){
$( "#container_nav" ).stop().animate({opacity: "1"}, 200);
}
);
$( "#container_nav").mouseout(
function (){
$( "#container_nav" ).stop().animate({opacity: "0.3"}, 300);
}
);
}
function closeImg() {
$( "#img_container" ).stop().animate({marginTop: "0px", opacity: "0"}, 200);
$( "#img_background" ).stop().animate({opacity: "0"}, 200);
$( "#container_nav" ).stop().animate({marginTop: "0", opacity: "0"}, 200);
setTimeout(function(){
document.getElementById("img_container").style.display = "none";
document.getElementById("img_background").style.display = "none";
var elem = document.getElementById("img_container");
elem.remove();
delete(elem);
var elem2 = document.getElementById("container_nav");
delete(elem2);
}, 200);
delete(path);
delete(pictureViewed.src);
removeChild(div);
}
</script>

Alles anzeigen

Seid bitte nicht zu streng mit mir, ich hab mir alles, was ich kann selbst beigebracht und habe bisher keine richtige Ausbildung in diesem Bereich genossen
Hier die Seite mit dem entsprechenden Script: http://beta.just-different-design.de/

Was auf der Seite zu sehen ist, wollte ich natürlich eigentlich nicht zeigen, daher fragt bitte garnicht erst und bitte keinen dummen Comments über irgendwelche Texte. Zudem sind die Unterseiten noch nicht verlinkt. Achso und optimiert ist auch nur für Firefox und ja, ich weiß, dass JQuery und JavaScript gemischt sind, obwohl es meist für die jeweilige Sprache eine Funktion gibt, aber ich habs halt so gemacht

ReeN · 28. Mai 2014

Hätte es nicht PHP sein können? Ich hasse Javascript *hust* Aber ich schau nachher mal im Detail drüber, falls bis dahin noch keiner die Lösung hat.

Spontan fällt mir aber auf, dass es keine Funktion openImage() gibt, die aufgerufen werden soll, wenn man auf "try again" klickt. Das sorgt beim Anklicken für nen Fehler.

Warum das beim ersten Ausführen nicht klappt schau ich nachher dann im Detail.

Spider · 28. Mai 2014

Das ist auch eher zu ignorieren... Die gibt es nichtmehr und ich hab den Link nur noch nicht ersetzt

Sry, fürs JavaScript. Scheint ja allgemein so belibt zu sein xD Ich kanns nämlich auch nicht leiden, aber lerns halt, weil man mit JQuery so schön animieren kann.

ReeN · 31. Mai 2014

Ok, konnte mich grad dann mal etwas damit beschäftigen. Sorry, kam bis jetzt immer was dazwischen

Also dein Problem ist, dass es nach...

JavaScript

pictureViewed = new Image(900, 500);
pictureViewed.src = "http://beta.just-different-design.de/interface/php/backstage/php/img/upload/"+path+"";

... etwas dauert, bis das Bild tatsächlich geladen wurde. Du willst allerdings direkt damit weiter arbeiten, obwohl es noch nicht fertig geladen ist. Dadurch kommt es zu dem Fehler und deshalb funktioniert es beim zweiten Aufruf dann auch. Einfach weil das Bild in der Zwischenzeit fertig geladen ist.

Mit pictureViewed.complete kannst du z.B. testen, ob das Bild bereits geladen wurde (true) oder eben nicht (false).

Vielleicht hilft dir das ja schon weiter

Edit:
Lösen kannst du es sonst z.B. so:

JavaScript

pictureViewed = new Image(900, 500);
pictureViewed.src = "http://beta.just-different-design.de/interface/php/backstage/php/img/upload/"+path+"";
pictureViewed.onload = function(){
/* dein code */
}

Dann wird der Code ausgeführt, wenn das Bild geladen wurde.

Spider · 31. Mai 2014

Okay, danke erstmal dafür, könnt mich grad wieder aufregen, dass ich da nicht selbst dran gedacht hab Hat gefunzt! Ich bin begeistert

Hat nur so lang in der Umsetzung meinerseits gedauert, da ich mir bei dem Versuch es auf eigene Faust zu lösen erstmal den ganzen Code zerhackt hab...

Nur das Problem mit dem IE besteht weiterhin. Liegt das an mir, oder wiedermal am IE, der den Code nicht vollständig umsetzen kann?

ReeN · 31. Mai 2014

Also der Pfad wird beim IE korrekt übernommen und geändert. Grad mal geschaut und ausgeben lassen. Nur das Bild ändert sich halt nicht. Hab grad beim Überfliegen einiger Google Ergebnisse was davon gelesen, dass der IE das Bild wohl cached und deshalb nicht aktualisiert. Wie man dem IE jetzt beibringt, dass er das Bild neu laden soll, müsste ich aber auch erst googlen.

Spider · 31. Mai 2014

Ja, da hab ich auch schon Experimente mit gemacht (siehe Zeilen 3 und 112-115)... Konnte aber bisher keine brauchbaren Lösungen in Google finden (daher hab ich mich an euch gewendet). Vielleicht Google ich aber auch wieder nur das Falsche...