1485 sujets

Web Mobile et responsive web design

Bonsoir à tous,

Je suis sur un gros projet sous jquery mobile que je lie avec codeigniter et une api maison pour la gestion de la bdd.

Je fais des transitions de type slide entre les pages.

J'arrive à une page qui doit récupérer une images distante et le chargement n'est pas instantané. Je souhaite donc mettre un loading au chargement de la page et l'enlever une fois l'image chargée.

j'ai mis dans le js appelé dans la page:

$(document).ready(function(){
    //initialisation
    //On adapte les dimenssions de l'image en fonction de la résolution
    resize_compo();//fonction necessaire pour mon application qui marche nickel dans tous les cas
    $.mobile.loading( 'show',{text: 'Chargement image', textVisible: true,} );
});
 
//une fois l'image composition chargée on enlève le loading
$("img#composition").load(function() {
    $.mobile.loading( 'hide' );
});


Si je charge la page directement ou un simple F5, l'effet voulu marche bien: le loading apparait et disparait pour faire apparaitre l'image entièrement.

Mais dans le flux de transition des pages, quand je transitionne sur cette page, le loading n'apparait pas et ensuite l'image apparait une fois chargée.

Pour le moment j'applique sur les liens qui vous vers cette page une attribut data-ajax="false" pour faire un refresh. Mais je perd l'effet transition slide que je cherche à garder dans cette application.

Avez-vous une idée?

Merci pour votre aide!

Cordialement,

Quentin