Door
jonas vermeulen
op 16-12-2011 15:00
gewijzigd op 16-12-2011 15:01
3.819 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
Het language attribuut is nog nooit een bestaat attribuut geweest, het is slechts een verzinsel, haal deze dus maar helemaal weg.
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.
dat werkt ook niet, hij laadt enkel tot en met de content div en wil dan blijkbaar eerst die for uitvoeren. terwijl de elementen die ik nodig heb in die content div moeten komen (en die worden dus nog niet geladen daar)
ja; het is de bedoeling dat boven de thumbs de grote afbeelding komt; ik wil niet dat alle afbeeldingen in 1 keer laden , maar pas als de pagina zelf geladen is (dus op de achtergrond).
kan je me een voorbeeld geven van hoe het met ajax zou moeten?
"Werk je met AJAX" was een vraag, dit hoeft namelijk niet als het om afbeeldingen gaat.
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:
<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:
<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]);
}
}
5. Net voor </body> roep je ShowLarge(0) aan
PS.
Gedeeltes van dit script komen van dynamicdrive.com
ja, dat had ik ook al geprobeerd met zo een onclick, maar ik zou ze graag alle afbeeldingen verder in de achtergrond laden, ik wil er transitions opzetten en als die afbeelding dan nog verder moet laden is dat niet zo handig.
heb je een idee hoe ik dan die src attributen moet invullen na het laden van de pagina?
Sorry, ben een stukje code vergeten, het moet zo zijn:
<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;
}
@ger, in HTML gebruik je name= en die probeer je te vangen met getElementById()? Overigens is werken met names in HTML en JS ouderwets en is het veel beter om te werken met IDs of classes.
Wouter, dat was exact wat ik nodig had. Bedankt!
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
<?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(){
@jonas, als je toch jQuery gebruikt. Waarom dan niet het hele script jQuery gebruiken?
$(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...
});
});
