내 사이트는 http://donoriolo.com/에 게시되어 있으며 프론트 페이지에 HTML 콘텐츠가있는 bxSlider가 있습니다.bxSlider로 HTML 콘텐츠를 더 부드럽게로드하는 방법
내 문제는, 거기에 제 2 (또는 나보다 느린 연결에 더, 나는 확신) 내용이 완전히 스타일이 적용되지 않은이며, 전체 창을 차지하므로 같은 여기서
모든 것이로드 된 후에도 페이지를 떠나 다시 돌아 오면 스플릿 초 동안 발생합니다.
나는 몸의 끝에있는 머리 대신 내 JS를 찌르려고했지만 행운은 없었다. 다른 아이디어? 아니면 그냥 잊어 버리고 슬라이더에 이미지를 사용하는 것이 낫겠습니까?
설정에 대한 지식이 없으면 확실하게 알 수 없습니다. 하지만 내 생각 엔 자바 스크립트를 사용하여 슬라이더를 http://donoriolo.com/js/script.min.js으로 초기화하는 것입니다.
콘텐츠 (DOM) 다음에이 스크립트가로드되기 때문에 당분간 화면에 표시되지 않습니다.
어떻게 해결할 수 있습니까?
글쎄, 가장 간단한 방법은 콘텐츠 앞에 스크립트를로드하는 것입니다. 이것은 <body> 대신 스크립트 태그를 <head>으로 옮겨서 수행 할 수 있습니다. 스크립트 태그로 본다면 :
<script src='/js/script.min.js' charset="utf-8"></script>
이렇게하면 스크립트가로드 될 때까지 웹 사이트가 표시되지 않습니다. 그다지 큰 문제는 아니지만 연결 속도가 느린 방문자 (많은 모바일 방문자 포함)는 느린 페이지로드에주의해야합니다. 또한 이것은 SEO과 관련하여 문제가됩니다. 당신은 수도
$('.bxslider').show();
을 : 당신이 것 때문에 어딘가 script.min.js의 끝에서,
...
<div class="bxslider" style="display: none">...</div>
...
그리고 스크립트가 실행 된 후 다시 보여 내가 할 것이 무엇
는 슬라이더를 숨길 수 있습니다 예를 들어 display 속성 대신 opacity을 사용하여 멋진 애니메이션으로이를 확장하고 싶습니다.
고맙습니다! 내가 말했듯이 어떤 이유에서든 스크립트를 머리에 쓰는 것은 어떤 이유로 든 그것을하지는 못했지만 불투명도를 애니메이션으로 만드는 것은 효과적입니다. :) – Eriyu