SEO 친화적 인 솔루션은 내가 SEO 친화적 인 방법으로 스타일이 적용되지 않은 내용의 플래시를 방지하려면 다음 JS를 사용하고 스타일이 적용되지 않은 내용

의 플래시를 피하기 위해 : 또한 동반 CSS를 가지고SEO 친화적 인 솔루션은 내가 SEO 친화적 인 방법으로 스타일이 적용되지 않은 내용의 플래시를 방지하려면 다음 JS를 사용하고 스타일이 적용되지 않은 내용

<script type="text/javascript"> 
$('#Container').addClass('fouc'); 
$(document).ready(function() { 
    $('#Container').show(); 
}); 
</script>

: <style> .fouc {display:none;}</style>합니다.

내가 예상하고있는 것은 최소한 페이지로드시 내 div #Container가 클래스에 있어야한다는 것입니다. 그러나 추가 할 수는 있지만 콘솔을 통해 수동으로 추가하는 경우에만 발생합니다.

예상대로 작동하려면 추가 코드 등이 필요합니까?

참고로이 스크립트가 호출되기 전에 이미 JQuery를 호출하고 있습니다.

귀하의 도움에 감사드립니다!

출처

2014-03-12 Sam W

이 코드는 #Container 요소 바로 다음에 배치해야 효과적이지만 FOUC를 완전히 제거하지 못할 수도 있습니다. 100 % 제거 할 수있는 유일한 방법은 요소를 미리 스타일 (js가 아닌 클래스를 직접 추가)하거나 인라인 CSS로 숨기는 것입니다. –

이 브라우저에서 어떤 브라우저가 보이나요? 나는 이것이 꽤 많이 IE의 고대 버전으로 강등되었다고 생각하고, CSS 링크가 어디에 있어야하는지 ('머리'에서) 있어야한다. 그렇다면 이것은 오늘날의 브라우저에서 문제가되지 않는다. (실제로, 나는 그것이 결코 문제가되지 않는다고 주장 할 것입니다. 단지 그들이 일하는 방법입니다.) –

OS/브라우저가 얼마나 새로운 지에 관계없이 느린 PC는 종종 FOUC를 얻습니다. –

FOUC를 피하는 가장 좋은 방법은 CSS 파일에 대한 모든 링크를 <head> 요소에 넣는 것입니다. 이렇게하면 스타일 지정 규칙이 내용 앞에로드되어 스타일이 적용됩니다. 이것은 모두 SEO 및 사용자에게 친숙합니다.

출처

2014-03-12 18:17:44 SomeKittens

문제 중 하나는 [anythingslider.js] (https://css-tricks.com/examples/AnythingSlider/demos.html) 스크립트를 사용하고 있는데,이 스크립트는 https ://css-tricks.com/examples/AnythingSlider/demos.html 아무 것도 캐시되지 않은 경우. –

위의 두 번째 링크는이 FOUC 솔루션으로 피하려고하는 것입니다! –

참고로, 그것은 js 문제입니다. 나는 슬라이더를 미리 스타일링하는 데있어 서구의 문제점을 보지 못합니다. 이미지에 적절한 클래스를 추가하여 첫 번째 것 이외의 모든 것을 숨길 수 있습니다. –

SEO 친화적 인 솔루션은 내가 SEO 친화적 인 방법으로 스타일이 적용되지 않은 내용의 플래시를 방지하려면 다음 JS를 사용하고 스타일이 적용되지 않은 내용

답변

관련 문제