0

私は phongap 1.5、jquery 1.7.1、jquery mobile 1.1.0 を使用しています。

複数ページのテンプレートには、次の html があります。

<ul data-role="listview" id="listviewPreferiti"></ul>

ボタンがタップされると、この js が実行されます (私は json と javascript の拡張よりもこのアプローチを好みます):

$("ul[id="listviewPreferiti"] li").remove();
$("#listviewPreferiti").append(res).listview("refresh");

または、以前と同じように機能する次のコード: $("#listviewPreferiti").html(res).listview("refresh");

res は、次のような「li」のリストです。

<li><a id="1" href="#">
    <img src="http://www.pippo.com/images/02.jpg" class="ui-li-thumb"/>
    <p>some text</p>
</a></li>
<li><a id="2" href="#">
    <img src="http://www.pippo.com/images/03.jpg" class="ui-li-thumb"/>
    <p>some other text</p>
</a></li>

レンダリングは通常は機能しますが、画面をタップするまで画像が表示されないことがあります。その理由は次のとおりだと思います：jquery mobileのレンダリングプロセスは、画像の読み込み前に終了します（実際、画像が読み込まれると、同じリストビューをリロードしても問題は発生しません）。

画像のレンダリングを強制するにはどうすればよいですか? （私はjquery .liveを使ってみましたが、うまくいきませんでした）（私はテストのためにAndroid 4の電話を使っています）

編集私は、私が呼び出しを追加した後、この問題に対するこの恐ろしいパッチを見つけました: refreshListView(listviewPreferiti,8); (試してみました $('img').trigger('refresh') dut は動作しません)

var refreshListView = function(listName, times){
    if (times >0){
        setTimeout(function() {
            $("ul[id="+ listName +"] li img").each(function(index) {
                this.style.borderBottom = "0px solid red";
            });
        },200); 
        refreshListView(listName, --times);
    }
}
4

1 に答える 1

1

JavaScriptImageオブジェクトには、onload使用できるコールバックがあります。例：

var myImage = new Image();
// Set the 'onload' callback to one of your functions
myImage.onload = imageLoadedCallback();
// Image starts loading once you set the 'src' attribute
myImage.src = "http://www.pippo.com/images/03.jpg";

これは、画像が読み込まれた後にコールバックを起動する方法の一般的な例です。

アップデート：

画像を含む HTML リスト全体を取得しているので、jQuery を使用して各<img>のsrc属性を見つけます。<img>次に、 jQuery が HTML で検出した各タグに対して、上記のようなコールバックを設定できます。画像が読み込まれたら、ドキュメントに添付できます。

これはjsFiddleの例です

于 2012-05-30T19:06:21.547 に答える