Næsten i orden, men der er et lille "delay-issue"...
Her er relevante uddrag af min nuværende kode:
<script type="text/Javascript" language="Javascript">
<!--
function ChangeStaffImage(ImageSource) {
document.StaffImage.src = '/images/staff/'+ImageSource.value;
waitforcomplete();
//document.getElementById('StaffImgWidth').innerHTML = document.StaffImage.offsetWidth - 12;
//document.getElementById('StaffImgHeight').innerHTML = document.StaffImage.offsetHeight -12;
}
function waitforcomplete() {
//:TODO: Der er et issue mht. at være bagud med at afrapportere billeddimensioner - forskel i FF og IE!
if (document.StaffImage.complete) {
document.getElementById('StaffImgWidth').innerHTML = document.StaffImage.offsetWidth - 12;
document.getElementById('StaffImgHeight').innerHTML = document.StaffImage.offsetHeight -12;
}
else setTimeout("waitforcomplete();", 500);
}
//-->
</script>
Billedet der dynamisk skiftes:
<img class="staffpic" name="StaffImage" src="/images/staff/jas.jpg" title="Medarbejderbillede" alt="Medarbejderbillede" />
Select-elementet fra formularen, hvor billedet vælges:
<select name="imagesrc" onclick="ChangeStaffImage(this);" onkeyup="ChangeStaffImage(this);">
<option value="abc.jpg">abc.jpg</option>
<option value="def.jpg">def.jpg</option>
<option value="ghi.jpg">ghi.jpg</option>
</select>
HTML-koden, hvor billededimensionerne indsættes:
(<span id="StaffImgWidth">110</span> × <span id="StaffImgHeight">150</span>px)
Sålænge billederne ikke er cachet i browseren, er der et issue med et lille delay indtil billedet er hentet fra serveren - dette betyder, at koden som aflæser billededimensionerne afvikles inden billedet er hentet fra serveren og dermed bliver det dimensionerne på det foregående billede der aflæses!! Efter at have kigget lidt rundt på nettet, fandt jeg frem til .complete-egenskaben, som er blevet indbygget i ovenstående. Ideen er at kigge på om billedet er hentet fra serveren og derefter aflæse højde og bredde og alternativt vente på at billedet bliver færdighentet. Selvom ideen så godt ud på den hjemmeside, hvor jeg fandt det, virker det ikke rigtigt i praksis...
Har du nogle forslag til, hvordan jeg kan omgå problemet med det lille delay indtil billedet er hentet - jeg kører det lokalt og ikke engang her bliver billedet hentet hurtigt nok!
NB: Årsagen til at jeg fratrækker 12 i dimensionerne er at jeg har indsat 2x6px margin/padding på det pågældende billede - det er en lille korrektion for dette.
Mvh Tommy
