afbeelding laden als div in beeld komt
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:
Code (php)
1
2
3
2
3
<div class="picture">
<img src="voorbeeld.jpg" alt="voorbeeld">
</div>
<img src="voorbeeld.jpg" alt="voorbeeld">
</div>
hoe kan ik ervoor zorgen dat javascript dicteert dat de div (dus de afbeelding) in beeld is
en daarna de afbeelding laad?
alvast bedankt
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
Om je een begin te geven. Zo haal je de height op. ( cross browser )
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
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;
}
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.
Gewijzigd op 06/06/2014 18:31:52 door Reshad F
Code (php)
1
<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.
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?
@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?
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?
Gewijzigd op 07/06/2014 10:16:12 door Ger van Steenderen
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
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:
Code (php)
1
<img class="image-load" data-image-load="URL van de afbeelding" />
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(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.
}
}
});
});
});
$(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.
Gewijzigd op 07/06/2014 13:46:19 door Joakim Broden
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.
Toevoeging op 07/06/2014 14:34:11:
ik ga nu je script testen
Code (php)
1
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?
Code (php)
1
image.attr('src', image.attr('data-image-load')); // SRC invullen.
de javascript console zegt:
event.returnvalue is deprecated. please use the standard event.preventdefault() instead
ik kan er zelf niet zoveel uit wijs worden
ik heb deze jQuery
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
Code (js)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(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');
});
$(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');
});
Gewijzigd op 07/06/2014 19:50:36 door Ger van Steenderen