[Javascript] Foto wordt soms niet weergegeven

[mr_star]

Ik heb een simpel javascriptje geschreven om gemakkelijk foto albums te maken.

Nu werkt dit allemaal heel goed bij de meeste foto's, maar soms wordt een foto gewoon niet weergegeven. Ik denk dat dit gebeurt wanneer het een paar ms te lang duurt om de server waar de foto op staat te bereiken. Wanneer ik mijn pagina reload komt die foto er wel op, dus de foto bestaat wel degelijk. En de server is ook vrij snel, niet dat die timeouts geeft ofzo. (trouwens al met andere servers getest)

hier is de relevante code:

JavaScript:

New_photo_url = Album_url + New_photo_id + '.jpg';
        
document.getElementById('photo_image').src =  New_photo_url;
document.getElementById('photo_id').value = New_photo_id;
        
Pic = new Image();
Pic.src = New_photo_url;
var Pic_width = Pic.width;
var Pic_height = Pic.height;
        
if (Pic_width > PicMaxWidth)
{
    ResizePercent = (1 - ((Pic_width - PicMaxWidth) / Pic_width));

    document.getElementById('photo_image').width = (Pic_width * ResizePercent);
    document.getElementById('photo_image').height = (Pic_height * ResizePercent);
}
else    
{
    document.getElementById('photo_image').width = Pic_width ;
    document.getElementById('photo_image').height = Pic_height;
}

boven deze code wordt gewoon de url van de nieuwe foto gegenereerd. Dit is trouwens het einde van het script, hierna wordt geen code meer uitgevoerd.

Hier in mijn code geef ik eerst aan de src van mijn <img> de nieuwe link en dan ga ik controleren of de afbeelding niet te groot is.

Iemand die begrijpt waarom de foto soms niet geladen wordt?

[crisp]

--> Webdesign & Graphics

Verder moet je foto eerst clientside geladen zijn voordat je de width en height kan opvragen. Je kan het beste je code in een functie zetten en die onload aanroepen (hetzij het onload event van je image, hetzij het onload event van je pagina).

[ Voor 75% gewijzigd door crisp op 25-01-2005 22:32 ]

[mr_star]

De foto's lijken idd te laden als ik het resize gedeelte weg laat. Dan zal ik eens kijken hoe ik bij een onload een functie kan aanroepen.

Hier zit ik dus al 3 dagen op te kijken, en ik kon het probleem maar niet vinden terwijl het weer zoiets simpel is..

[mr_star]

Ik heb dus in mijn <img onload="javascript..."> de resize functie gezet en dit lijkt bij iedereen goed te werken.

[Verwijderd]

nou.. ik heb hetzelfde probleem:

ik gebruik het volgende javascript om een foto te resizen

code:

<script>
function setDim(myImage)  {
     intNewWidth =null;
     myImage = document.getElementById(myImage)
     origWidth = myImage.width;
     
     if (origWidth > 399){
          myNewWidth = 400;
     }
     else{
          myNewWidth = origWidth;
     }
     
     myImage.width = myNewWidth;
  } 
</script>

vervolgens zet ik in de image tag onLoad='return setDim(\"".$to_edit."\");'

ik heb namelijk een forum gemaakt waar mensen bestaande foto's van het web kunnen plaatsen. Om de layout intact te laten mogen de foto's dus niet breder worden dan 400px. Dit werkt wel wanneer ik op f5 druk en dus reload, maar bij het normale laden van de pagina komt er niet eens een foto te staan. Mijn id is dat de foto ondanks het onLoad event toch niet volledig geladen is om de grote te bepalen. Nu wou ik dus eigenlijk een delay maken van 1 sec voordat de setDim functie wordt uitgevoerd.. maar waar moet ik dat dan plaatsen???

[Thijsmans]

Je kunt natuurlijk met PHP de afmetingen van dat plaatje opvragen, ben je niet meer afhankelijk van javascript Hoe dan ook, je hebt ook nog het onReadystateChange-event (meen ik). Weet niet of het cross-browser is en nog werkt (heb het jaren geleden ooit gebruikt).

[Verwijderd]

oke.. dat heb ik even nagekeken.. en het werkt nog niet..

code:

<script>
function setDim(myImage)  {
  intNewWidth =null;
  myImage = document.getElementById(myImage)
  origWidth = myImage.width;
  if (myImage.readyState=="complete") {
    if (origWidth > 370){
      myNewWidth = 400;
    }
    else{
      myNewWidth = origWidth;
    }
  }
  myImage.width = myNewWidth;
} 
</script>

met in de img-tag onreadystatechange='setDim(\"".$to_edit."\");'

met f5 werkt het wel.. via normaal laden niet

ps. de reden dat ik dit niet via php kan regelen is omdat de afbeeldingen niet altijd op mijn eigen server staan.

[ Voor 16% gewijzigd door Verwijderd op 26-01-2005 15:30 ]

[Thijsmans]

http://nl.php.net/manual/en/function.getimagesize.php
getimagesize
(PHP 3, PHP 4 , PHP 5)

getimagesize -- Get the size of an image
Description
array getimagesize ( string filename [, array &imageinfo] )

URL support was added in PHP 4.0.5
Example 2. getimagesize (URL)

PHP:

$size = getimagesize("http://www.example.com/gifs/logo.gif");

// if the file name has space in it, encode it properly
$size = getimagesize("http://www.example.com/gifs/lo%20go.gif");

[ Voor 4% gewijzigd door Thijsmans op 26-01-2005 18:13 ]

[Verwijderd]

Hier heb ik ook aan gedacht. Maar ik ben bang dat het laden van de pagina dan behoorlijk lang kan gaan duren wanneer de afbeeldingen niet meer op het internet beschikbaar zijn. Er wordt ook pas tekst weergegeven wanneer alle plaatjes geladen zijn.

heeft iemand hier misschien een andere mening over?

Prammenhanger schreef op woensdag 26 januari 2005 @ 18:13:
[...]

[mr_star]

Ik heb het nu op deze manier opgelost en dit werkt perfect:

code:

function resize_photo()
{
        var PicMaxWidth = A[0]['Max_width'];
        var PicMaxHeight = A[0]['Max_height'];
        var ResizePercent = 1;
        
        Pic = new Image();
        Pic.src = document.getElementById('photo_image').src;
        
        var PicWidth = Pic.width;
        var PicHeight = Pic.height;
        
        if (PicWidth > PicMaxWidth)
        {
            ResizePercent = (PicMaxWidth / PicWidth);
        }
        if ((PicHeight * ResizePercent) > PicMaxHeight)
        {
            ResizePercent = (PicMaxHeight / PicHeight);
        }
        
        document.getElementById('photo_image').width = (PicWidth * ResizePercent);
        document.getElementById('photo_image').height = (PicHeight * ResizePercent);
}

code:

[img]"xxx.jpg"[/img]

Op deze manier kan ik de max breedte en max hoogte opgeven.

[ Voor 17% gewijzigd door mr_star op 27-01-2005 15:36 ]

[McVirusS]

mr_star schreef op donderdag 27 januari 2005 @ 14:43:
Ik heb het nu op deze manier opgelost en dit werkt perfect:

code:

<img id="photo_image" src="xxx.jpg" onload="javascript:resize_photo();">

In een onclick moet je geen javascript: zetten. Kan je weglaten, dit is alleen van belang in linkjes (en dan nog alleen in het href gedeelte).

[ Voor 6% gewijzigd door McVirusS op 27-01-2005 15:39 ]