hallo iedereen,
Omdat mijn website heel veel plaatjes heeft en dus een lange laad tijd heeft
kwam ik op het idee om de afbeelding pas te laden als de div in beeld komt
ik heb nu:
de reden waarom ik de afbeeldingen ophaal via php is de foto's die je verstuurd
niet voor iedereen zichtbaar moeten zijn. nu ik het via php doet word er eerste gecontroleerd
of je de afbeelding mag zien als dat het geval is echo't hij de afbeelding als het niet het geval is echo't hij een afbeelding met de tekst: deze foto is niet voor u bedoelt.
het script werkt niet ik vermoed dat het hier aan ligt
var position = image.position().top();
als ik een alert('hoi') voor deze regel zet krijg ik de hele tijd hoi te zien
zodra ik alert('hoi') na deze regel zet krijg ik niks meer te zien
weet iemand hoe dat komt?
de javascript console zegt:
event.returnvalue is deprecated. please use the standard event.preventdefault() instead
ik kan er zelf niet zoveel uit wijs worden
event.returnvalue is deprecated. please use the standard event.preventdefault() instead heeft niks te maken met die regel, tenzij je nog een oude jQuery hebt ofzo?? Heb je een online link, kan ikz elf even kijken wat er fout gaat.
Zo zou ik het doen:
[code lang="js"]
$(document).ready(function() {
$(window).on('scroll', function() {
$(".image-load").each(function(index, el) {
var im_data = $(el).data('image_src');
// controleer of het attribuut geen image bevat
if (typeof im_data == 'string') {
var top = $(el).offset().top
// controleer of de image in de viewport staat
if (top >= $(window).scrollTop() &&
top <= $(window).scrollTop() + $(window).height()) {
// zet de image in het data-attribuut
var new_img = new Image();
new_img.src = im_data;
$(el).data('image_src', new_img);
el.src = new_img.src;
}
}
});
});
// trigger de scroll
$(window).trigger('scroll');
});
[/code]
