afbeeldingen achteraf laden
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);
}
});
</script>
alvast bedankt
JOnas
Gewijzigd op 16/12/2011 15:01:00 door Jonas vermeulen
Heb je wel jQuery ingeladen? En het best is om JS te plaatsen vlak voor </body>, dan weet je namelijk zeker dat de hele dom geladen is en heb je $(document).ready niet meer nodig.
de pagina kan je hier vinden: http://groepbelien.be/gallery2.php?eventid=31
Werk je met AJAX ?
kan je me een voorbeeld geven van hoe het met ajax zou moeten?
Je hoeft ook niet alle afbeeldingen op de achergrond te laden, dit kan je doen zodra er op een thumb geklikt wordt. Het principe is heel simpel:
1. je maakt in HTML een img object aan met een lege src ie:
Code (php)
1
<img name="LargeImg" />
2. Je vult de array met verwijzingen naar de url van de afbeelding.
3. Je hangt een onclick event aan de thumbs
4. In de binnen de had tags schrijf je de volgende JS code:
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
<script>
function CacheImage(ImageSource) {
var ImageObject = new Image();
ImageObject.src = ImageSource;
return ImageObject;
}
function ShowLarge(idx) {
if (typeof Slides[idx] == 'string')
{ // ONLY CACHES THE IMAGES ONCE
Slides[Index] = CacheImage(Slides[idx]);
}
}
function CacheImage(ImageSource) {
var ImageObject = new Image();
ImageObject.src = ImageSource;
return ImageObject;
}
function ShowLarge(idx) {
if (typeof Slides[idx] == 'string')
{ // ONLY CACHES THE IMAGES ONCE
Slides[Index] = CacheImage(Slides[idx]);
}
}
5. Net voor </body> roep je ShowLarge(0) aan
PS.
Gedeeltes van dit script komen van dynamicdrive.com
Gewijzigd op 16/12/2011 18:49:38 door Ger van Steenderen
heb je een idee hoe ik dan die src attributen moet invullen na het laden van de pagina?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<script>
function CacheImage(ImageSource) {
var ImageObject = new Image();
ImageObject.src = ImageSource;
return ImageObject;
}
function ShowLarge(idx) {
if (typeof Slides[idx] == 'string')
{ // ONLY CACHES THE IMAGES ONCE
Slides[idx] = CacheImage(Slides[idx]);
}
document.getElementById("LargeImg").src = Slides[idx].src;
}
function CacheImage(ImageSource) {
var ImageObject = new Image();
ImageObject.src = ImageSource;
return ImageObject;
}
function ShowLarge(idx) {
if (typeof Slides[idx] == 'string')
{ // ONLY CACHES THE IMAGES ONCE
Slides[idx] = CacheImage(Slides[idx]);
}
document.getElementById("LargeImg").src = Slides[idx].src;
}
Gewijzigd op 16/12/2011 19:29:30 door Ger van Steenderen
@jonas, dan moet je een window.onload event maken: http://tinkerbin.com/jrTod1PA
Gewijzigd op 16/12/2011 22:54:00 door Wouter J
ik heb het nog een beetje aangepast zodat de eerste afbeelding pas zichtbaar wordt nadat die eerste afbeelding volledig geladen is.
vroeger laadde die ook in strepen.
Ger, ook bedankt voor de moeite
Jonas
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<?php
window.onload = function() {
for(u=0;u<imagearray.length;u++) {
var imagetoload = document.getElementById('img_'+(u+1));
imagetoload.setAttribute('src',imagearray[u]);
$("#img_"+(u+1)).load(function(){
$(this).fadeIn();
});
?>
window.onload = function() {
for(u=0;u<imagearray.length;u++) {
var imagetoload = document.getElementById('img_'+(u+1));
imagetoload.setAttribute('src',imagearray[u]);
$("#img_"+(u+1)).load(function(){
$(this).fadeIn();
});
?>
Gewijzigd op 17/12/2011 10:26:43 door jonas vermeulen
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
$(function() {
// Window.onload in jQuery
imagearray.each(function( i, img ) {
var elem = $('#img_' + (i + 1));
elem.attr('src', img).fadeIn();
// Load is voor AJAX, het lijkt me niet dat je dat in dit geval gebruikt...
});
});
// Window.onload in jQuery
imagearray.each(function( i, img ) {
var elem = $('#img_' + (i + 1));
elem.attr('src', img).fadeIn();
// Load is voor AJAX, het lijkt me niet dat je dat in dit geval gebruikt...
});
});
ik dacht nochtans dat dat ook jquery was en geen ajax? http://api.jquery.com/load/
Maar ik wist niet dat je jQuery.load ook daarvoor kon gebruiken. Daarom heb ik het script nog wat verbeterd, met de load erin:
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
$(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();
});
});
});
// 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.