(jQuery) Met alert wordt deel van script wel uitgevoerd
Ik zal beginnen met een stuk van mijn code te laten zien:
index.php:
Code (php)
1
2
3
2
3
$.get("ons.php?loading=load", function(response) {
$('#content').html(response);
});
$('#content').html(response);
});
Dit stuk gebruik om om een pagina op te vragen en in de div #content te laten zien.
Nu heb ik ook een (sub)titel in mijn ons.php pagina.
Het probleem is dat het font dat ik voor deze titel gebruik een speciaal ingesteld font is.
Nu wilt dit font in sommige browsers wat breder/smaller zijn.
Het lijntje dat er onder zit wil ik daarom aanpassen aan de breedte van de tekst.
Hiervoor had ik het volgende bedacht:
ons.php:
Code (php)
1
2
3
2
3
$(document).ready(function() {
$('#img-onzeaanpak').width($("#span-onzeaanpak").width()+3);
})
$('#img-onzeaanpak').width($("#span-onzeaanpak").width()+3);
})
#img-onzeaanpak is het id van het plaatje.
#span-onzeaanpak is het id van de span die om de tekst staat.
Opzich werkt dit prima.
Alleen het probleem is dat in sommige browsers zoals Opera en Firefox, de ene keer het plaatje veel breder is dan de andere keer.
Nu is het me opgevallen dat als ik mijn code verander in dit dat het wel werkt.
Code (php)
1
2
3
4
5
2
3
4
5
$(document).ready(function() {
alert('1');
alert('2');
$('#img-onzeaanpak').width($("#span-onzeaanpak").width()+3);
})
alert('1');
alert('2');
$('#img-onzeaanpak').width($("#span-onzeaanpak").width()+3);
})
Ik denk zelf dat het komt omdat de pagina nog niet volledig is geladen, maar volgens mij hoort de document.ready() daarop te letten.
Weet iemand hoe ik dit kan oplossen?
Gewijzigd op 27/08/2013 17:20:55 door Tom aan t Goor
Edit::
Probeer eens $(window).ready() i.p.v. $(document).ready().
Gewijzigd op 27/08/2013 17:58:28 door Roel -
$(document).ready() wordt uitgevoerd als de hele dom geladen is (de document structuur, je html)
window.onload wordt uitgevoerd als de hele pagina klaar is met laden, dus ook alle plaatjes, frames etc zijn geladen.
Door het gebruik van alerts heeft je pagina op de achtergrond de tijd om je plaatjes te laden waardoor het dan wel werkt.
Code (php)
1
2
3
2
3
window.onload = function(){
$('#img-onzeaanpak').width($("#span-onzeaanpak").width()+3);
}
$('#img-onzeaanpak').width($("#span-onzeaanpak").width()+3);
}
edit:
jQuery versie:
Code (php)
1
2
3
2
3
$(window).load(function() {
$('#img-onzeaanpak').width($("#span-onzeaanpak").width()+3);
});
$('#img-onzeaanpak').width($("#span-onzeaanpak").width()+3);
});
Gewijzigd op 04/09/2013 11:45:39 door Frits Katoen
Een <img> element gaat autonoom en asynchroon zijn source (src) zoeken.
Reken er niet op dat een image volledig geladen is op $(document).ready, noch op window.onload.
En dan nog, zullen verschillende webbrowsers anders reageren.
Het zou ook een vrij slecht idee zijn.
Dan laat je de werking van jouw site afhangen van andere servers (want een <img> mag zonder probleem zijn src op andere servers zoeken).
Je wil toch niet dat jouw javascript wordt uitgeschakeld omdat er ergens een server plat ligt, waar je een logo van 15px x 15px haalt?
Er bestaan jQuery plugins. Daarmee kan je een functie laten uitvoeren op het moment dat de images echt volledig geladen zijn.
bv. deze
http://alz.so/imageloader/
volgens Mozilla dan ;)
Ik heb even snel een testje gedaan met IE10, FF23 en Chrome29 en deze drie doen het zoals gedefinieerd