Jquery, .height () modifica l'aggiornamento della pagina ma non il carico: jquery, ridimensionamento, altezza, ridimensionamento

Ho già visto il seguente argomento:

Jquery Problema di caricamento al primo caricamento / hard refresh

Quale sembra essere una versione inversa del problema che sto riscontrando, in questo caso il problema è un forte aggiornamento, in questo caso è la soluzione.

A causa di alcuni problemi nella progettazione di una rete complessaInterfaccia utente dell'applicazione per lavorare su diverse altezze del monitor Ho deciso di rivolgermi a jQuery per modificare le altezze per me. Inizialmente utilizzavo altezze percentuali, ma questo ha portato a grandi lacune in punti e l'utilizzo di altezze minime e min è risultato difficile per il trascinamento di elementi fuori dal contesto. L'uso dell'applicazione è molto più lento senza JavaScript abilitato (sebbene sia basato su un miglioramento progressivo), quindi è scontato che un utente lo abbia acceso. Questo è per coloro che suggeriranno una soluzione CSS.

Link per testare Questo è stato rimosso poiché il dominio non è più valido

Il problema è che quando la pagina viene caricataun collegamento ipertestuale è dimensionato correttamente - se lo hai aperto dovresti vedere questo, con circa 30px tra il fondo delle caselle giallo / verde e il fondo del browser. Comunque aggiorna (potresti aver bisogno di aggiornarlo un po 'di volte) e vedrai la scatola gialla sparire dalla parte inferiore della pagina, e la casella verde si allungherà per unirla.Questo accade solo dal vivo sul mio server - Non ho mai notato questo errore durante lo sviluppo sul mio localhost perché non succede.

Il codice jquery si trova in sandpit1.1webservices.co.uk/ground-control/examples/scripts/jumpers.js e il particolare snippet è:

function loadResize()
{
//var window=$(window).height();
var window=$("div.main").height();
//window=parseInt(window);
window-=50;
$("div.staff ul").css("height",window);
window-=175;
$("div.loads").css("height",window);
window-=150;
$("div.loads div.list").css("height",window);
}

Puoi vedere che ho commentato alcune coselì, e ci sono più nel codice effettivo per il test. Quando l'altezza della finestra viene segnalata all'inizio del test, dice 885 sul mio browser (altezza schermo 1024px), tuttavia l'aggiornamento restituisce valori casuali tra 1133 e 1785. Esegui un aggiornamento o caricamento della pagina e torna a 885. La funzione è chiamata proprio alla fine di document.ready:

$(window).resize(loadResize);
loadResize();

Avevo l'evento di ridimensionamento innescarsi ma rimosso nel caso in cui causasse il problema.

Qualche idea?

risposte:

Alla fine ho risolto questo problema spostando il file loadResize() funzione dal $(document).ready() evento al $(window).load() evento. Questo è corretto, poiché il documento pronto si attiva dopo che il DOM è stato creato ma prima che vengano scaricati elementi aggiuntivi. Per questo motivo elementi come immagini e caratteri personalizzati (entrambi presenti nella pagina) hanno influenzato i calcoli delle dimensioni - a seconda della velocità della rete e di quanto caricato al momento, sarebbero state assegnate altezze diverse per il primo evento.

Prova a scriverlo come $ (function loadresize () {e end with});