저는 이미지와 대화 형 요소가 풍부한 웹 응용 프로그램을 만들고 있습니다. 내가 중 하나) 완전히 로더를 제거하고 내 자신의로 대체, 또는 b) 로더가 때까지 유지 한 필요가커스텀 로딩 프로세스를위한 jQuery 모바일 쇼 로더?

$(document).on('pageinit', function(){ 
    $('.ui-content').hide(); 
    var imgs = $(".ui-content img").not(function() { return this.complete; }); 
    var count = imgs.length; 
    if (count) { 
     imgs.load(function() { 
      count--; 
      if (!count) { 
       $(".ui-content").show() 
      } 
     }); 
    } else { 
     $(".ui-content").show(); 
    } 
});

: 이러한 이유로 나는 단지 한 번에 모든 이미지가로드 된 페이지를 표시 할 위의 기능이 완료됩니다.

로더를 제거하거나 필요하지 않을 때까지 유지하는 방법은 무엇입니까?

출처

2013-05-02 styke

보통 당신이 ('숨기기') $의 .mobile.loading'전화 만 수' – m90

당신이 .mobile.loading $를 시도 ('숨기기 '); ? – PrasadW

@ m90 시도, 작동하지 않습니다! – styke

jQuery를 모바일 사용자 정의 로더

솔루션 :

작업 jsFiddle : http://jsfiddle.net/Gajotres/vdgB5/

Mobileinit 이벤트가 jQuery를 모바일 전에 초기화 할 필요가 초기화 및 jQuery를 한 후된다. 또한이 기능을 사용하려면 CSS에 대한 몇 가지 추가 변경 사항을 수행해야합니다.

우선 불투명도가 낮고 최종 회 전자를보기 어렵 기 때문에 기본값 인 ui-loader-default 클래스를 재정의해야합니다. 얼마나 원한지 불투명도 값을 변경하십시오.

.ui-loader-default { 
    opacity: 1 !important;  
}

그리고 이것은 우리의 회 전자입니다. 여기

.custom-spinner { 
    width: 37px !important; 
    height: 37px !important; 
    background-image:url('http://pictures.reuters.com/ClientFiles/RTR/Images/ajax-loader.gif'); 
    display: block; 
}

는 작업 예제 :

코드 예제

HTML : 크롬 같은 웹킷 브라우저를 포함

<!DOCTYPE html> 
<html> 
    <head> 
     <title>jQM Complex Demo</title> 
     <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
     <style> 

      .ui-loader-default { 
       opacity: 1 !important;  
      } 

      .custom-spinner { 
       width: 37px !important; 
       height: 37px !important; 
       background-image:url('http://pictures.reuters.com/ClientFiles/RTR/Images/ajax-loader.gif'); 
       opacity: 1 !important; 
       display: block; 
      } 
     </style> 
     <script type="text/javascript" src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script> 
     <script> 
      $(document).bind('mobileinit', function(){ 
       $.mobile.loader.prototype.options.text = "loading"; 
       $.mobile.loader.prototype.options.textVisible = false; 
       $.mobile.loader.prototype.options.theme = "a"; 
       $.mobile.loader.prototype.options.html = "<i class='custom-spinner'></i>"; 
      }); 
     </script>  
     <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>  
     <script> 
      $(document).on('pageshow', '#index', function(){   
       $.mobile.loading('show');   
      }); 
     </script> 
    </head> 
    <body> 
     <div data-role="page" id="index"> 
      <div data-theme="a" data-role="header"> 
       <h3> 
        First Page 
       </h3> 
       <a href="#second" class="ui-btn-right">Next</a> 
      </div> 

      <div data-role="content"> 

      </div> 

      <div data-theme="a" data-role="footer" data-position="fixed"> 

      </div> 
     </div> 
    </body> 
</html>

jQuery를 모바일 아약스 로더의 프로그래밍 실행

일부 브라우저, jQuery mobile ajax를 프로그래밍 방식으로 실행한다. 로더. 그들은 다음과 같이 serinterval 수동으로 실행할 수 있습니다 :

$(document).on('pagebeforecreate', '#index', function(){  
    var interval = setInterval(function(){ 
     $.mobile.loading('show'); 
     clearInterval(interval); 
    },1);  
}); 

$(document).on('pageshow', '#index', function(){ 
    var interval = setInterval(function(){ 
     $.mobile.loading('hide'); 
     clearInterval(interval); 
    },1);  
});

출처

2013-05-02 11:11:14 Gajotres

이 코드를 사용하여 페이지를 다시 클릭 할 수 있습니다.로드하는 동안 페이지를 클릭 할 수없는 옵션이 있습니다. –

100 % 확신하지 못했습니다. 문서에서는이 로더와 함께 할 수있는 몇 가지가있다 : 다른 사람들이 말했듯이

http://api.jquerymobile.com/page-loading

, 당신은 로더/표시를 수동으로 호출하여 사라지게 할 수 있습니다.

$.mobile.loading("show"); 

$.mobile.loading("hide");

출처

2013-05-02 11:08:52 asgeo1

내가 부트 스트랩은 로딩 화면과 첫 번째 데이터-역할 = "페이지"사업부를 가질 때 사용했던 기법. 부트 스트랩 후 changePage를 사용하여 프로그래밍 방식으로 홈 페이지로 전환합니다.

$.mobile.changePage("#home" , { reverse: false, changeHash: false });

여기가 바이올린입니다. `및`$의 .mobile.loading ('쇼');
http://jsfiddle.net/puleos/Esf7H/

출처

2013-05-02 11:18:23

커스텀 로딩 프로세스를위한 jQuery 모바일 쇼 로더?

답변

jQuery를 모바일 아약스 로더의 프로그래밍 실행

관련 문제