모바일 로딩시 작은 화면 숨기는 방법을 알려주세요~

안녕하세요? 그동안 KBOARD 관련 게시판에서 문의를 드렸었는데요.....

오늘은 다른 주제라서 이 쪽 게시판에 글을 올립니다.

 

다름이 아니라 워드프레스로 제작한 사이트인데, 모바일에서 접속하면

전체화면 사이즈로 폴 로딩이 되기 전에 썸네일 형태의 이미지(전체 페이지화면을 작게 축소한 모양)를

잠시 화면 좌측에 보여주었다가 0.5~1초후에 전체 화면이 로딩됩니다.

 

로딩 용량에 비해서 통신속도가 뒷 받침되지 못해서 생기는 문제인 것 같은데요...

중간에 잠시 깜박하고 나오는 이화면을 안보이게 하려면 어떻게 해야 하나요?

 

여기다 글을 올려도 답변을 주실지 궁금합니다.^^;;;

 

참고로 사이트는 http://remarketshop.co.kr 입니다.

 

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
  • 홈페이지를 모바일과 확인해보니 말씀하신 현상이 있네요

    일반적인 반응형 CSS나 메타태그는 정상적으로 입력된듯합니다.

    ie7-8등의 구버전은 반응형웹이 동작하지 않는게 일반적인데요, 모두 적용된걸 보니 스크립트가 추가로 적용된듯 합니다.

    이 스크립트의 반응속도가 약간의 딜레이가 있는듯 하고요.

    정확한 원인은 테마 제작자가 알듯싶네요^^

  • 이쪽 게시판도 답변을 빨리 해주시네요^^ 감사합니다.

    오늘은 아침부터 이문제로 이곳 저곳을 찾아헤메는데, 워드프레스 카페에서 아래와 같은 답변을 받았습니다.

     

        (답변 받은 내용)

    간단하게 <body style="display:none;"> 그 다음 제이쿼리로

    $(window).load(function(){
    $('body').show()
    });

    이런식으로 해주면 되지 않을까요?.... ^^;;


    답변내용은 모든 파일이 로딩될 때까지 화면을 감추었다가, 파일 로딩이 끝나면 보여지게 하는 방법입니다.

    그런데 제 워드프레스 header.php 파일을 보면 <body> 태그 부분이 아래와 같이 시작됩니다.

    <body <?php body_class(); ?>>
    <header>
    <div class="width-container">
    ....... (하략) .....


    그래서 JQuery 를 잘몰라서 아래와 같이 고쳐서 사이트에 접속했더니... pc와 모바일 둘다 아무것도 안나오고

    흰색 화면만 나옵니다.

     

    (제가 수정한 내용)
    <body style="display:none;" <?php body_class(); ?>>
    $(window).load(function(){
    $('body').show() });
    <header>
    <div class="width-container">

     

    제이쿼리에 해결방법이 있을 것 같은데, 저와 같은 상태 (위의 body태그 참조)에서

    어떻게 가능한 방법이 없을까요? 도와주시면 고맙겠습니다^^;;;

     

    p.s 10월달에는 반드시 시간내서 JQuery 부터 배워야 겠네요^^*
         바쁘시더라도 추가 도움을 주시면 참으로 고맙겠습니다.

  • jQuery(자바스크립트) 사용법이 잘못 되셨네요.

    <body style="display:none;" <?php body_class(); ?>>

    이렇게 해보시고요

    아래 코드는 footer 쪽의 </body> 태그 바로 위에 넣어 보시겠어요?

    <script>
    $(window).load(function(){
    $('body').show()
    });
    </script>
    </body>

    직접 테스트해본게 아니기 때문에 해보시고 알려주세요~

  • 스레봇님 안녕하세요^^

     

    (1) header.php 파일에는 아래의 코드대로 넣었고요...

    <body style="display:none;" <?php body_class(); ?>>

     

    (2) footer.php 파일에서 </body> 태그 바로 위에 말씀하신대로 아래와 같이 넣었습니다.

    <script>

    $(window).load(function(){

    $('body').show()
    });
    </script>
    </body>

     

    (3) 그런데 사이트에 접속하면 '흰색 화면만 나오네요'

    그래도 어드민으로 접속이 가능해서 일단은 원상복귀를 했습니다.

    저 기능만 되면 참 좋겠는데요. 아쉽네요^^;;;

    스레봇님에게 계속 도와달라고 하기도 미안스럽고 ㅠ.ㅠ

     

  • $(window).load(function(){
       $('body').show()
    });

    부분을

    jQuery(document).ready(function(){
       jQuery('body').show();
    });

    이걸로 바꿔보시겠어요?

  • 스레드봇님!

     

    (1) header.php 파일에는 먼저번 코드대로 넣었고요...

    <body style="display:none;" <?php body_class(); ?>>

     

    (2) footer.php 파일에서 </body> 태그 바로 위에 말씀하신대로 아래와 같이 넣었습니다.

    <script>

    jQuery(document).ready(function(){
       jQuery('body').show();
    });

    </script>
    </body>

     

    (3) 결과는 마찬가지네요 ㅠ.ㅠ

        이 것과는 무관하게 제가 10월달에 찾아뵙고 밥한번 사겠습니다^^*

  • 이상하네요~ 혹시 jQuery가 동작하지 않는건지도요...

    <head>
    .... 내용 ......
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    </head>

    위 처럼 head 태그 사이에(위치는 상관 없습니다) jQuery 추가후 다시 해보시겠어요?

  • 스레봇님! 도와주셔서 고맙습니다.

    그런데 제가 Layerslider 플러그인을 사용하고 있는데요, 이것과 충돌이 있는 것 같습니다.

     

    그리고 결과는 마찬가지인데요

    (1) 메뉴가 pc에서 - 서브메뉴가 1줄로 나오던 것이 2줄로 나오고

    (2) 모바일에서는 - 상단의 메인 메뉴바가 없어지는 현상이 일어납니다.

    아마 제가 설치한 복잡한 환경과 관련이 있는 것 같아서 해결에 많은 시간이 걸릴듯하여 이것으로 종료를 해야 겠습니다.

     

    나중에 바쁜일이 끝나면, 정식으로 기술지원을 요청받도록 하겠습니다.

    그런데 정식으로 기술요청을 받으면 비용은 얼마나 되는지 궁금합니다^^*

     

    ps. 본건은 세팅환경의 복잡성으로 인해서, 잠정 종료하도록 하겠습니다^^*

    여러모로 많이 도와주셔서 감사합니다!!!

     

     

     

     

워드프레스 에러 기술지원 서비스 전문가에게 맡기세요