Vous mentionnez les docs alpha de jQM 1.2 donc ma réponse est basée sur cette version de jQM.
Ci-dessous vous pouvez trouver 2 options pour changer l'image du chargeur par défaut.
Solution 1
Comme indiqué dans le JQM 1.2 Alpha Docs:
Lorsque jQuery Mobile démarre, il déclenche un événement mobileinit sur l'objet du document. Pour remplacer les paramètres par défaut, liez à mobileinit. Étant donné que l'événement mobileinit est immédiatement déclenché, vous devez lier votre gestionnaire d'événements avant le chargement de jQuery Mobile. Lien vers vos fichiers JavaScript dans l'ordre suivant:
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>
Pour configurer la boîte de dialogue de chargement globalement les paramètres suivants peuvent être définis sur son prototype lors de l'événement mobileinit:
$(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 = "";
});
Ci-dessous vous trouverez un exemple de travail dans lequel vous pouvez entièrement personnaliser le chargeur dans l'option prototype html.
Exemple:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(document).bind('mobileinit', function(){
$.mobile.loader.prototype.options.text = "loading";
$.mobile.loader.prototype.options.textVisible = true;
$.mobile.loader.prototype.options.theme = "a";
$.mobile.loader.prototype.options.textonly = false;
$.mobile.loader.prototype.options.html = "<span class='ui-bar ui-overlay-c ui-corner-all'><img src='../images/my-custom-image.png' /><h2>loading</h2></span>";
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.js"></script>
<script>
$(document).on("click", ".show-page-loading-msg", function() {
$.mobile.loading('show');
});
</script>
</head>
<body>
<!-- /page -->
<div data-role="page" class="page-map" style="width:100%; height:100%;">
<!-- /header -->
<div data-role="header" data-theme="b">
<h1>Test</h1>
</div>
<!-- /content -->
<div data-role="content" class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<button class="show-page-loading-msg">Click</button>
</div>
</div>
</body>
</html>
Solution 2
Remplacer les styles CSS par défaut utilisés pour représenter le chargeur de page.
ÉDITÉE
Pour jQM 1.1.1 version il y a les options configurables suivantes:
- chaîne de loadingMessage, par défaut: "chargement"
Définir le texte qui apparaît quand une page est en cours de téléchargement. Si la valeur est false, le message n'apparaîtra pas du tout.
- loadingMessageTextVisible booléen, valeur par défaut: false
Indique si le texte doit être visible lorsqu'un message de chargement est affiché. Le texte est toujours visible pour les erreurs de chargement.
- Chaîne loadingMessageTheme, valeur par défaut: "a"
Le thème utilisé par le message de chargement lorsque le texte est visible.
Exemple de code:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(document).bind('mobileinit', function(){
$.mobile.loadingMessageTheme = 'e';
$.mobile.loadingMessageTextVisible = true;
$.mobile.loadingMessage = "test";
});
</script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script>
$(document).on("click", ".show-page-loading-msg", function() {
$.mobile.showPageLoadingMsg();
});
</script>
</head>
<body>
<!-- /page -->
<div data-role="page" class="page-map" style="width:100%; height:100%;">
<!-- /header -->
<div data-role="header" data-theme="b">
<h1>Test</h1>
</div>
<!-- /content -->
<div data-role="content" class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<button class="show-page-loading-msg">Click</button>
</div>
</div>
</body>
</html>
De plus, vous pouvez essayer de remplacer le CSS par défaut utilisé pour le style du chargeur de JQM. Plus précisément, vous pouvez modifier ou remplacer les styles dans la section l'écran de chargement et le style dans la section icône de chargement qui sont utilisés pour représenter le chargeur de page. Vous trouverez here le CSS utilisé dans jQM 1.1.1.
/* loading icon */
.ui-icon-loading {
background: url(images/ajax-loader.gif);
background-size: 46px 46px;
}
/* loading screen */
.ui-loading .ui-loader { display: block; }
.ui-loader { display: none; z-index: 9999999; position: fixed; top: 50%; left: 50%; border:0; }
.ui-loader-default { background: none; opacity: .18; width: 46px; height: 46px; margin-left: -23px; margin-top: -23px; }
.ui-loader-verbose { width: 200px; opacity: .88; box-shadow: 0 1px 1px -1px #fff; height: auto; margin-left: -110px; margin-top: -43px; padding: 10px; }
.ui-loader-default h1 { font-size: 0; width: 0; height: 0; overflow: hidden; }
.ui-loader-verbose h1 { font-size: 16px; margin: 0; text-align: center; }
.ui-loader .ui-icon { background-color: #000; display: block; margin: 0; width: 44px; height: 44px; padding: 1px; -webkit-border-radius: 36px; -moz-border-radius: 36px; border-radius: 36px; }
.ui-loader-verbose .ui-icon { margin: 0 auto 10px; opacity: .75; }
.ui-loader-textonly { padding: 15px; margin-left: -115px; }
.ui-loader-textonly .ui-icon { display: none; }
.ui-loader-fakefix { position: absolute; }
merci pour le commentaire ... Lemme vérifier dans mon projet – Nav
par la façon dont je suis en utilisant la dernière version stable 1.1.1 ... est-il différent pour cette version? – Nav
Oui, c'est différent. Je pensais que vous utilisiez jQM 1.2 parce que le lien posté renvoyait à jQM 1.2. –