2010-10-22 4 views
5

Mam tło obrazu, którego treść chcę być zawsze widoczna, bez względu na rozdzielczość użytkownika. Dlatego chcę być w stanie określić, jaka jest rozdzielczość i ustawić odpowiedni plik obrazu tła przed załadowaniem strony, na samym początku. Czy to możliwe?Uruchamianie funkcji JavaScript przed wczytaniem strony (ustawienie tła o odpowiednim rozmiarze)

+0

+1 za pomysł i zadanie pytania. –

+0

Co się stanie, jeśli użytkownik zmieni rozmiar swojego okna? – some

+0

Nic. Tło powinno pasować do rozdzielczości ekranu, a nie do bieżącego rozmiaru okna. – kremuwa

Odpowiedz

9

Najwcześniejszym punktem, w którym można uruchomić funkcję JavaScript z dostępem do DOM (bez oczekiwania na załadowanie strony), jest umieszczenie znacznika <script> tuż po tagu otwierającym <body>.

Skrypty wewnątrz <head> będą działać, zanim to nastąpi, ale nie będzie dostępu do elementów na stronie.

Spróbuj kod

<body> 
    <script type="text/javascript"> 
     alert("Some elements shouldn't even be visible when this shows"); 
    </script> 
    ... rest of the page 
</body> 

Zobacz ten example z pewnym Gangsta Lipsum tekstu.

+0

Naprawdę? Kiedy uruchamiane są skrypty w grze? – some

+0

@some: Dobre pytanie. Działa PRZED tagiem '', ale nie ma dostępu do elementów na stronie. Powinienem to wyjaśnić. – Marko

+0

Masz dostęp tylko do elementów zadeklarowanych przed tagiem skryptowym, ponieważ reszta strony nie została jeszcze przeanalizowana. To jest powód, dla którego ludzie czekają na załadowanie DOM, zanim zaczną go dotykać. Przyzwoite ramy bardzo ułatwiają dołączanie funkcji do zdarzenia ładowanego przez DOM w trybie przeglądarki. – some

0

Korzystając z architektury JavaScript, takiej jak MooTools, można korzystać z zdarzenia DomReady zamiast z aplikacji onLoad (która oczekuje na załadowanie wszystkich elementów obrazu), można wywołać zdarzenie po załadowaniu strony.

Alternatywnie z CSS możesz ustawić bezwzględną lewą górną i szerokość: 100%, aby wygrać dzień. : O

+0

Wolę nie używać kodu zewnętrznego, jeśli mogę to zrobić bez niego :). Jeśli chodzi o drugą część odpowiedzi - nie chcę, aby zmieniała rozmiar okna, ale aby dostosować do szerokości ekranu. Ale i tak dzięki :). – kremuwa

0

Zdaję sobie sprawę, że szczególnie pytasz o JavaScript, ale w witrynie CSS Tricks jest całkiem niezły decent technique for doing this with CSS (i opcjonalnie mały JavaScript).

+0

Nie chcę, aby zmienił rozmiar okna, ale aby dostosować do szerokości ekranu. Dzięki i tak :) – kremuwa

+0

Technika, którą połączyłem używa CSS do skalowania obrazu, tak aby pasował do okna przeglądarki. Nie zmienia rozmiaru okna. – stevelove

+0

Wiem - "Nie chcę, aby zmieniła rozmiar za pomocą okna" - to znaczy: "Nie chcę przeskalować tła, gdy okno (i okno przeglądarki) zmienia swój rozmiar". Chcę dostosować go tylko do szerokości ekranu. – kremuwa

1

Sprawdź ten artykuł na uzyskanie rozdzielczości ekranu w JavaScript: http://andylangton.co.uk/articles/javascript/browser-screen-resolution/

tagi Script wykonać inline jeśli nie nic szczególnego, aby je odroczyć (i odroczenie wykonania skryptu nie jest obsługiwany na wszystkich przeglądarkach) zrobić. Oznacza to, że znacznik skryptu zagnieżdżony wewnątrz znacznika body zostanie wykonany przed załadowaniem pozostałej części ciała. Możesz mieć skrypt wykrywający rozdzielczość ekranu i ustawiający obraz tła dla ciała.

+0

Wiem, jak uzyskać rozdzielczość ekranu, dzięki :). Chciałbym zaakceptować obie twoje odpowiedzi, ale ponieważ nie jest to możliwe, a odpowiedź @ Marko jest bardziej złożona, muszę podjąć decyzję. Ale jeszcze raz dziękuję i masz punkt, by uzyskać przydatną odpowiedź. – kremuwa

+0

bez problemu. Dzięki :) – Gopherkhan

Powiązane problemy