Zamówienie przetwarzania dla HTML i CSS w IE9

Mam stronę, na której ukrywam zawartość strony, dopóki nie zostanie wywołane zdarzenie JavaScript, a następnie odkryję zawartość. Działa całkiem dobrze w Chrome, IE11 i IE10. Ale kiedy używam IE9, ukrywanie zawartości zostaje zignorowane, a strona jest w pełni załadowana, w którym momencie zaczyna działać ukrywanie.Zamówienie przetwarzania dla HTML i CSS w IE9

Z tego powodu przeniosłem ukrywanie z JavaScript do CSS zamiast tego samego efektu wizualnego. Moje pytanie brzmi: czy CSS jest stosowany dopiero po pełnym załadowaniu html, czy też tu coś przeoczyłem? Trochę kodu tutaj:

#deactivate { 
    display: none; 
}

<html> 
    <body> 
     <div id="deactivate">MycontentIsNotToBeShown</div> 
     <div>MyContentIsToBeShown</div> 
    </body> 
</html>

$(document).ready(function() { 
    //......DO things and then as the last step: 
    $("#deactivate").first().show(); 
});

Jak powiedziałem znika z „wyłączyć” div nie zdarza się co najmniej aż kod jQuery rozpoczyna pracę (czyli co najmniej jak to wygląda optycznie).

Cała strona, gdzie to się dzieje to strona z sharepointem (sharepoint 2013) ... formularz nintex w trybie widoku, aby był dokładniejszy. Nie jestem pewien, czy ma to coś wspólnego z tym lub jeśli ma coś wspólnego z kolejnością ładowania rzeczy w IE9. Tak więc moje pytanie tutaj, czy może być tak, że kolejność w jaki sposób rzeczy są ładowane/używane w IE9 może spowodować ten efekt?

Jako dodatkowa uwaga tutaj: już sprawdziłem, czy jest zbyt wiele selektorów w pliku .css, co pozornie nie jest prawdą (wiem, że istnieje limit w IE dla ilu selektorów będzie działać w pojedynczej plik .css).

Źródło

2014-12-12 Thomas

Użycie 'pierwszy()' na własną Selektor 'id' jest zbędny, ponieważ na stronie możesz mieć tylko unikatowe atrybuty id. Jeśli masz wiele elementów z identyfikatorem "deaktywuj", powinieneś zmienić go na klasę. –

To tylko jeden. Nie jestem zbytnio przyzwyczajony do jquery, więc po prostu wstawiłem pierwszy(), aby być po stronie oszczędzania (id powinien być w liczbie pojedynczej zawsze tak jak w tym przypadku), ponieważ nie byłem pewien, czy podoba mu się to zbyt wiele bez pierwszego (). – Thomas

Plik CSS jest "zewnętrzny", o ile mi wiadomo (formularze nintex nieco to ukrywają). Z tego, co słyszałem wczoraj, może wynikać, że problem, który sam miałem, wynika z HOW sharepoint, który analizuje utworzone formularze i następnie wysyła je do przeglądarki, która ma zostać wyrenderowana:/ – Thomas

Musisz umieścić swój kod poza body tagu zostanie ona zastosowana po dom i układ (CSS):

</body> 
    <script> 
     $(document).ready(function() { 
      $("#deactivate").first().show(); 
     }); 
    </script> 
</html>

Źródło

2014-12-15 15:04:05 user3792919

Umieszczenie elementu '

czyste i SEO przyjazny sposób, aby obsługiwać ten problem.

W CSS dodaj taką regułę stylu (możesz uczynić ją bardziej specyficzną, by ukryć tylko te elementy, lub ukryć je za pomocą różnych właściwości).

html.loading { 
    visibility: hidden; 
}

Następnie w JavaScripcie, bez czekania na document.ready lub onload, dodać klasę loading do elementu HTML. Następnie, na window.load, usuń tę klasę.

$('html').addClass('loading'); 
$(window).on('load', function(){ 
    $('html').removeClass('loading'); 
});

Spowoduje to, że zawartość witryny będzie niewidoczna do momentu uruchomienia zdarzenia ładowania. Możesz nawet zrobić coś sprytnego, na przykład animację ładowania CSS3.

Dodatkową korzyścią jest to, że strona będzie działać, jeśli użytkownik ma wyłączoną obsługę JavaScript i potencjalnie poprawi SEO.

Skrypty w stopce?

Jeśli chcesz załadować jQuery/inne skrypty w stopce, możesz w prosty sposób wstawić następującą etykietę skryptu do nagłówka, aby dodać klasę ładowania bez jQuery.

Następnie można po prostu usunąć klasę za pomocą jQuery ze skryptami załadowanymi do stopki.

$(window).on('load', function(){ 
    $('html').removeClass('loading'); 
});

Źródło

2014-12-16 02:28:45

Witam "$ (" html "). AddClass (" ładowanie ");" czy nie ma jeszcze możliwości, że wpadnie w kłopoty? (przynajmniej dla innych elementów w html wiem, że może to być kłopotliwe, ponieważ nie są ładowane wystarczająco szybko, ponieważ sam znacznik html nie jestem pewien) – Thomas

@Thomas Znacznik 'html' będzie zawsze dostępny dla JavaScript w Dokument HTML, nawet jeśli umieścisz skrypt w 'head'. Problem polega na tym, że możesz manipulować tylko znacznikami HTML, które zostały otwarte przed przetworzeniem tagu 'script'. Ponieważ 'html' musi być otwarty przed jakimikolwiek znacznikami' script', problem nie wpływa na element 'html'. –

To jest problem: jQuery musi być załadowany, aby '.addClass' działał, co oznacza, że nie można używać JavaScriptu w systemie asynchronicznym typu bottom/load JavaScript. –

Za pomocą CSS, aby ukryć element, a następnie użyć JavaScript, aby zobaczyć element na stronie obciążenia jest poprawna sposób i powinien działać w programie Internet Explorer zgodnie z oczekiwaniami. Element powinien być początkowo ukryty.

Jednak, jeśli arkusz stylów zawierający regułę #deactivate { display: none; } jest obecny w treści, przeglądarka rozpocznie renderowanie zawartości, dopóki nie napotka arkusza stylów, który nakazuje ukryć blok dezaktywacji.

drugie, wspomnieć, że chcesz pokazać zawartość na obciążenia ale kod jQuery używa document.ready zdarzeń, które są różne od window.onload i pożary wcześniej:

Impreza jest DOMContentLoaded uruchomiony, gdy dokument został całkowicie załadowany i przeanalizowany, bez czekania na arkusze stylów, obrazy, i kończenia ładowania ramek pomocniczych (zdarzenie load może być użyte do wykrycia pełnej strony strony ). (source)

Proponuję inline tę szczególną regułę CSS dla najlepszych wyników i użyć zdarzenia window.load który czeka, aż wszystkie zasoby są pobierane:

<html> <head> <style> #deactivate { display: none; } </style> <link rel="stylesheet" href="styles.css"> </head> <body> <div id="deactivate"> <h1>Hidden Content</h1> </div> <script src="jquery.js"></script> <script> $(window).on("load", function() { $("#deactivate").show(); }); </script> </body> </html>

Źródło

2014-12-18 11:18:34

Należy zauważyć, że jeśli CSS ukrywa element domyślnie, a JS później go wyświetla, jeśli użytkownik ma wyłączoną obsługę JavaScript, nie będzie mógł zobaczyć tego elementu w ogóle. Może to mieć negatywne konsekwencje dla optymalizacji pod kątem wyszukiwarek. Zobacz moją odpowiedź na sposób obejścia tego problemu. –

Możesz użyć JavaScript, aby "napisać" CSS, który ukrywa elementy. To jest proste. –

Można, ale 'addClass' /' removeClass' jest lepszy. Oddziela style od treści/skryptów. –

Powiązane problemy

Zamówienie przetwarzania dla HTML i CSS w IE9

Odpowiedz

Powiązane problemy