1

プレビューサムネイルをクリックして、リストビューから大きなサイズの画像を読み込もうとしています..

ライトボックスの画像は中央に配置する必要があります。そんなに長い間、とても良い..

今、それぞれのリスト行をクリックすると、大きな画像を動的にロードしようとしています。

理論的には問題ありません。完全なポップアップ コードを動的に生成するか、既存のポップアップ コードに jquery を使用して img src を挿入できます。

しかし今では、最初のクリックで画像サイズが正しく再調整されませんでした。ポップアップ ボックスはサイズ 0 で中央に配置され、画像コンテンツが読み込まれると右/下に拡張されます。

ポップアップを 2 回開くと、正しく配置されます。（おそらくキャッシングの問題？）。

その場で大きなサイズの画像をプリロードしようとしましたが、他の調整は成功しませんでした。

動的画像ソースを使用したポップアップ呼び出しの単純な jqm コード:

 $('#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");
 });

jqm の専門家がこの問題の解決策を持っていることを願っています。いつもヒントをありがとう！

ライブの例を示すためにフィドルを作成しました: 最初のクリックが中心にない動的な画像

4

2 に答える 2

2

画像が非同期で読み込まれています。私見それがあなたの問題の原因です。setTimeoutそれを手伝うことができます。

ただし、まず第一に、ポップアップをプログラムで開いているため、リンク (ボタン) を変更する必要があります。

  • 溝data-rel="popup"
  • 設定href="#"

したがって、次のようになります。

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

次に、クリック ハンドラーを変更します。

$('#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;
});

私はあなたのjsFiddleを更新しました

于 2013-01-09T00:33:43.307 に答える
0

ありがとうpeterm、

私は今のところそうします：

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

popup.openロードメソッドの中間を開始する前に、画像がロードされます。

于 2013-01-09T16:11:19.400 に答える