afbeeldingen achteraf laden

Door jonas vermeulen op 16-12-2011 15:00 gewijzigd op 16-12-2011 15:01

3.817 views

hallo,

ik probeer een pagina te maken waar de afbeeldingen achteraf worden ingeladen in de pagina. daarvoor heb ik een stukje code, die de src attributen van de afbeeldingen instelt na de document.ready().

Echter als ik een breakpoint zet op de for lus die er uitgevoerd wordt blijkt de volledige dom niet geladen te zijn en loopt het aldus ook fout.

laat ik die for lus weg, (dus een lege document.ready) en plaats ik daar een breakpoint, dan is de dom wel volledig geladen.

ik hoop dat iemand me kan vertellen hoe ik dat kan oplossen

<script language="javascript" type="text/javascript">

$(document).ready(function() {
// Handler for .ready() called.
for(u=0;u<imagearray.length;u++) {
var imagetoload = this.getElementById('photo_'+u);
imagetoload.setAttribute('src',imagearray[u]);
}

});
</script>

alvast bedankt
JOnas

jonas vermeulen

18-12-2011 11:10

die load zou ik toch willen behouden, dat zorgt ervoor dat de afbeelding pas verschijnt nadat die helemaal geladen is.
ik dacht nochtans dat dat ook jquery was en geen ajax? http://api.jquery.com/load/

Wouter J

18-12-2011 11:24

AJAX is perfect geïntegreerd met jQuery, dus het is een functie van jQuery voor AJAX.

Maar ik wist niet dat je jQuery.load ook daarvoor kon gebruiken. Daarom heb ik het script nog wat verbeterd, met de load erin:

$(function() {
  // Window.onload in jQuery
  
  var imagearray = [
    'http://waldio.webatu.com/system/images/nemo[1].jpg',
    'http://waldio.webatu.com/system/images/walle[1].jpg',
    'http://waldio.webatu.com/system/images/up[1].jpg'
  ];
  jQuery.each(imagearray, function( i, img ) {
    var elem = $('#img-' + (i + 1));
    elem.css('display', 'none');
    elem.attr('src', img).load(function() {
      $(this).fadeIn();
    });
  });
});

Wat jij had was een beetje dubbel op. Imagetoload bevatte namelijk het image element, maar 2 regels daarna ging je het element nog een keer ophalen met jQuery om het load event te gebruiken. 2 keer een element zoeken in de DOM kost tijd en dat is onnodige tijd.
Dit script bevat geen ophaal functies en ik had een vergissing gemaakt met jQuery.each(), dit heb ik ook verbeterd.

Reageren

Inloggen om te reageren