afbeelding laden als div in beeld komt

http://www.appelsiini.net/projects/lazyload

ik zou het graag zelf typen.
maar zo moeilijk moet het toch niet zijn
alleen js hoeft maar te dicteren dat de div in beeld is en dan
i.p.v zon load image de src veranderen naar de afbeelding

Je zal sowieso met AJAX moeten werken wil je dit voor elkaar krijgen.

Om je een begin te geven. Zo haal je de height op. ( cross browser )

  function getViewportHeight() {
        var height = window.innerHeight; // Safari, Opera
        var mode = document.compatMode;

        if ( (mode || !$.support.boxModel) ) { // IE, Gecko
            height = (mode == 'CSS1Compat') ?
                document.documentElement.clientHeight : // Standards
                document.body.clientHeight; // Quirks
        }

        return height;
    }

Wat jij nog moet toevoegen.

1. Scrollen bijhouden. en bepalen aan de hand van het scrollen waar de gebruiker is. Vervolgens doe je iets als

if('img').visible .. o.i.d.
.. haal de volgende plaatjes via ajax op.

Wtf, hoezo Ajax hietvoor gebruiken. Ajax gebruik je om data op te halen en geen afbeeldingen.

<img class="image-load" data-image-load="de_url_van_de_afbeelding.png" />

En dan via javascript kijken of de scrollTop in de buurt komt van de .image-load. Komt het in de buurt dan de src van de afbeelding zetten mbv data-image-load attribute.

oke maar elke afbeelding moet toch een andere id hebben? om de
scr te veranderen?
maar hoe kun je die dan via 1 script allemaal aanroepen als hij zover gescrolt is?
en hoe kun je een javascript full time door laten runnen? met een loop functie over
de funtie heen die controleert hoever je gescrolt bent?

@Hertog Wat is jou definitie van Data? want een img is ook gewoon data en kan prima d.m.v. Ajax opgehaald worden. Ajax is niets meer of minder dan een JS functie die een php bestand aanroept. En als jij daar iets textueels mee op wilt halen prima, maar afbeeldingen kan ook prima.

@Christian google is op ajax lazy loading dan zie je genoeg voorbeeldjes. Als je genoeg tijd hebt kun je natuurlijk zelf een variant op maat maken maar mocht je het direct nodig hebben dan is de link die Aar gaf een hele goede welke ook Ajax ondersteunt.

http://www.appelsiini.net/projects/lazyload/enabled_ajax.html

Christian k op 07/06/2014 09:02:30

oke maar elke afbeelding moet toch een andere id hebben? om de
scr te veranderen?
maar hoe kun je die dan via 1 script allemaal aanroepen als hij zover gescrolt is?
en hoe kun je een javascript full time door laten runnen? met een loop functie over
de funtie heen die controleert hoever je gescrolt bent?

Nee, je kunt een eventListener maken op scroll (window.onscroll).
Als je jquery gebruikt kan je dan met een class selector alle images aflopen, controleren of een image een source heeft, zoniet dan de source erin zetten als de image in beeld is.

Met zo'n selector (kan ook met plain JS) krijg je een verzameling van DOM elementen, je kan daar doorheen lopen en de benodigde acties uitvoeren op het element, je hebt dus geen id nodig.



Toevoeging op 07/06/2014 10:13:58:

@Reshad,
Waarom zou je een php script aanroepen als je een image rechtstreeks kan ophalen?

@ger het moet wel via php want ik echo de images via een php script.

maar het probleem is hij soms de afbeeldingen niet laad,
hij laad altijd maar 1 albeelding (het verschilt welke als ik reload zie ik er soms 2)
dus ik dacht misschien licht het aan dat het teveel bandbreedte kost dus dat ik daarom een lazy load
in mijn pagina moet bouwen. is dat eigenlijk wel de oplossing?

Toevoeging op 07/06/2014 11:00:04:

ik heb dit script gevonden
http://css-tricks.com/snippets/javascript/lazy-loading-images/
maar hoe kan ik er voor zorgen dat hij als de afbeeldingen ingeladen zijn

Voor de browser maakt het niet uit of een php in de src staat of een jpg, die verwacht gewoon een image.
Het is wel zo dat als je images via PHP processed dit sowieso al trager is dan de direct van de server te halen.

Ik vraag me af waarom je het zelf wilt coderen, die link die Aar gaf regelt het allemaal voor je.
Ook de link die je zelf gaf doet dat volgens mij.

Reshad F op 07/06/2014 10:04:15

@Hertog Wat is jou definitie van Data? want een img is ook gewoon data en kan prima d.m.v. Ajax opgehaald worden. Ajax is niets meer of minder dan een JS functie die een php bestand aanroept. En als jij daar iets textueels mee op wilt halen prima, maar afbeeldingen kan ook prima.

Ja dat is toch onnozel? Jij wilt dus aan een afbeelding een id koppelen, dan via ajax de id meesturen en dan via php gaan bekijken welke afbeelding bij welke id hoord? Wat is dat voor omslachtige (mijn mening onnozele) oplossing?

Zelf zou ik zoiets als dit doen:

	<img class="image-load" data-image-load="URL van de afbeelding" />

	$(document).ready(function() {
		$(window).bind('scroll', function() {
			$('.image-load').each(function() {
				var image = $(this);

				if (undefined == image.attr('src')) { // Kijken of de SRC is ingevuld.
					var position = image.position().top();
					
					if ($(window).scrollTop() + $(window).height() >= position) { // Is de scollpositie + scherm grote groter dan de positie van de afbeelding.
						image.attr('src', image.attr('data-image-load')); // SRC invullen.
					}
				
				}
			});
		});
	});

Ik heb deze code nog niet getest, er kunnen fouten in zitten en waarschijnlijk zal je hem nog wat aan moeten passen.