JQuery Mobile - image popup listview -> pas centrée sur le premier clic

Question

Je suis en train de charger des images de grande taille à partir d'un ListView avec un clic sur une vignette de prévisualisation ..

L'image lightbox doit être centrée. Si long, si bon ..

Maintenant, j'essaie de charger les grandes images de manière dynamique sur cliquez sur la ligne de la liste respective.

Théoriquement aucun problème - je peux générer dynamiquement le code popup complet ou injecter le img src avec jquery au code popup existant.

Mais maintenant, la taille de l'image ne serait pas reconisée correctement au premier clic. La boîte contextuelle est centrée avec la taille zéro et s'étend vers la droite/bas après le chargement du contenu de l'image.

Si j'ouvre le popup deux fois, il serait positionné correctement! (peut-être un problème de mise en cache?).

J'ai essayé de précharger l'image de grande taille à la volée et quelques autres réglages sans succès.

code simple JQM d'appel popup avec une source d'image dynamique:

$('#thumb').live('click', function() { 
    var imgbig = "..."; 
    $("<img/>").attr("src",imgbig); // Even preloading not working 
    $("#imgbig").attr("src",imgbig); // Img Tag in existing popup tag 
    $("#imgPop").popup("open"); 
}); 

je l'espère, l'un de vous JQM experts a une solution à ce problème. Merci pour chaque conseil!

J'ai fait une Fiddle vous montrer un exemple en direct: Dynamic image not centered on first click

Answer 1

image chargement de manière asynchrone. À mon humble avis c'est ce qui cause votre problème. setTimeout peut vous aider avec cela.

Mais tout d'abord, puisque vous ouvrez pop-up programme vous devez changer votre lien (bouton):

• fossé data-rel="popup"
• mis href="#"

il ressemble:

<a href="#" id="thumb">Open image!</a> 

Deuxièmement modifier gestionnaire de clic:

$('#thumb').live('click', function() { 
    var imgbig = "http://www.csunas.org/uploads/beautifull-grand-canyon.jpg"; 
    $("#imgbig").attr("src", imgbig); 
    setTimeout(function(){ 
     $("#imgPop").popup("open"); 
    }, 100); 
    return false; 
}); 

J'ai mis à jour votre jsFiddle

Answer 2

vous peterm Remerciez,

je le fais donc pour l'instant:

var img = new Image(); 
$(img).bind('load', function(e) { 
    $("#imgbig").attr("src",imgbig); 
    $.mobile.hidePageLoadingMsg(); // Hide spinner 
    $("#imgPop").popup("open"); 
}); 
img.src = imgbig; 
$.mobile.showPageLoadingMsg(); // Show spinner until image is loaded 

image serait chargé maintenant avant l'initiant popup.open inbetween la méthode de chargement.