(jQuery) Met alert wordt deel van script wel uitgevoerd

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Tom aan t Goor

Tom aan t Goor

27/08/2013 17:19:13
Quote Anchor link
Allereerst mijn excuses voor de onduidelijke titel (Ik wist niet wat er beter bij zou passen).

Ik zal beginnen met een stuk van mijn code te laten zien:
index.php:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
$.get("ons.php?loading=load", function(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.http://www.mupload.nl/img/c9e6upcrd.png

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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
$(document).ready(function() {
    $('#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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
$(document).ready(function() {
    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
 
PHP hulp

PHP hulp

25/11/2020 00:39:46
 
Roel -

Roel -

27/08/2013 17:57:13
Quote Anchor link
Misschien irrelevant, maar je stukje code om een pagina in te laden in een div kun je ook met jQuery .load() doen.
Edit::
Probeer eens $(window).ready() i.p.v. $(document).ready().
Gewijzigd op 27/08/2013 17:58:28 door Roel -
 
Tom aan t Goor

Tom aan t Goor

27/08/2013 18:19:47
Quote Anchor link
Dit heeft helaas niet geholpen.
 
Frits Katoen

Frits Katoen

04/09/2013 11:43:23
Quote Anchor link
Misschien de oplossing voor je probleem en sowieso handig om te weten:

$(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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
window.onload = function(){
    $('#img-onzeaanpak').width($("#span-onzeaanpak").width()+3);
}


edit:
jQuery versie:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
$(window).load(function() {
    $('#img-onzeaanpak').width($("#span-onzeaanpak").width()+3);
});
Gewijzigd op 04/09/2013 11:45:39 door Frits Katoen
 
Kris Peeters

Kris Peeters

04/09/2013 13:19:50
Quote Anchor link
Images moet je apart bekijken.

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/
 
Frits Katoen

Frits Katoen

04/09/2013 16:57:18
Quote Anchor link
Waarom er niet op rekenen? Volgens de definitie hoort window.onload wel zo te werken,
volgens Mozilla dan ;)

Ik heb even snel een testje gedaan met IE10, FF23 en Chrome29 en deze drie doen het zoals gedefinieerd
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.