[Javascript] Afbeelding 100% geladen

[ZeroXT]

De bedoeling is dat er een laad afbeelding getoond word en op moment dat er een afbeelding geladen is met javascript geplaatst wordt.

code:

var afbeelding = document.createElement('img');
afbeelding.src = 'afbeelding.jpg';

Op moment dat de afbeelding 100% geladen is wil ik dat deze ergens word geplaatst.

code:

document.getElementById('div').appendChild(afbeelding);

Vraag is: Hoe weet ik dat de afbeelding 100% is geladen zodat deze het laad afbeelding kan vervangen ipv dat de afbeelding geplaatst word terwijl die nog moet worden geladen.


edit:
Volgens mij heb ik het al voor elkaar:

code:

var afbeelding = document.createElement('img');
    afbeelding.src = 'http://vistawallpapers.files.wordpress.com/2007/03/vista-wallpaper-grass-ripples.jpg';
    (
        function(afbeelding)
        {
            afbeelding.onload = function()
            {
                plaats(afbeelding);
            }
        }
    )(afbeelding);
    
function plaats(afbeelding)
{
    document.getElementById('afbeelding').appendChild(afbeelding);
}

[ Voor 28% gewijzigd door ZeroXT op 13-10-2010 17:25 ]

[Bosmonster]

JavaScript:

$('<img src="">').load(function(){
   $(this).appendTo('#afbeelding');
});

http://www.jquery.com

Overigens zijn er een aantal browsers die het event niet afvuren bij het laden uit de cache, dus laat je applicatie niet afhangen van dit gedrag (zoals hierboven ).

Of gebruik de workaround plugin: http://github.com/peol/jq...aw/master/ahpi.imgload.js

[ Voor 95% gewijzigd door Bosmonster op 13-10-2010 18:22 ]

[R4gnax]

Bosmonster schreef op woensdag 13 oktober 2010 @ 18:08:
Overigens zijn er een aantal browsers die het event niet afvuren bij het laden uit de cache, dus laat je applicatie niet afhangen van dit gedrag (zoals hierboven ).

Eigenlijk nooit problemen mee gehad, zolang je het load event maar bindt voordat je het src attribuut op het img element zet.

JavaScript:

$.extend({
  getImage: function(url, success){
    $("<img />")
      .bind("load", function(event){
        $(this).unbind("load");
        if ($.isFunction(success))
        {
          success.apply(this, [this, url]);
        }
      })
      .attr("src", url);
  }
});

JavaScript:

$(document).ready(function(){
  $.getImage("foobar.jpg", function(img, url){ $(document).append(img); })
});

[ZeroXT]

Maar dat is allemaal leuk en aardig maar aan jquery heb ik niets. Ik werk namelijk zonder libraries zoals ook duidelijk te zien is in de startpost. Wel neem ik de tip mee van Bosmonster.

[Bosmonster]

R4gnax schreef op donderdag 14 oktober 2010 @ 08:50:
[...]


Eigenlijk nooit problemen mee gehad, zolang je het load event maar bindt voordat je het src attribuut op het img element zet.

Die optie heb je alleen niet altijd als je het load event wilt afvangen van images die in je pagina staan (wat vaak het geval is bij unobtrusive controls).

ZeroXT schreef op donderdag 14 oktober 2010 @ 09:07:
Maar dat is allemaal leuk en aardig maar aan jquery heb ik niets. Ik werk namelijk zonder libraries zoals ook duidelijk te zien is in de startpost. Wel neem ik de tip mee van Bosmonster.

Ach, er is altijd ruimte voor verbetering

[ Voor 29% gewijzigd door Bosmonster op 14-10-2010 09:52 ]