0

Sencha Touch 2.1.1 のアイテム テンプレートを使用して、ステータス、写真、およびユーザーに関する詳細をリスト内のアイテムとして表示しています。ページを読み込むと、最初の写真を除くすべての写真の読み込みに遅延が見られます。これは、JSONP がステータスを取得するために呼び出すのと同じくらい時間がかかります。ここでそれを見ることができます。

私のテンプレートはとても簡単です:

    itemTpl: [
        "<div class='listView people'>",
        "   <tpl if='workforceID != undefined'>",
        "       <tpl if='workforceID == \"phind\" || workforceID == \"NULL\"'>",
        "           <div class='avatar notFound user'></div>",
        "       <tpl else>",
        "     <tpl if='presence != undefined && presence != null && getAvailability(presence) == \"Available\"'><div class='avatar status available' style='background-image: url(https://services.xxx.com/emppics/{workforceID}.jpg);'><span></span></div>",
          "          <tpl elseif='presence != undefined && presence != null && getAvailability(presence) == \"Busy\"'><div class='avatar status busy' style='background-image: url(https://services.xxx.com/emppics/{workforceID}.jpg);'><span></span></div>",
          "          <tpl elseif='presence != undefined && presence != null && getAvailability(presence) == \"Away\"'><div class='avatar status away' style='background-image: url(https://services.xxx.com/emppics/{workforceID}.jpg);'><span></span></div>",
          "          <tpl elseif='presence != undefined && presence != null && getAvailability(presence) == \"Unavailable\"'><div class='avatar status unavailable' style='background-image: url(https://services.xxx.com/emppics/{workforceID}.jpg);'><span><em></em></span></div>",
          "          <tpl elseif='presence != undefined && presence != null && getAvailability(presence) == \"Offline\"'><div class='avatar status offline' style='background-image: url(https://services.xxx.com/emppics/{workforceID}.jpg);'><span></span></div>",
          "          <tpl elseif='presence != undefined && presence != null && getAvailability(presence) == \"Do Not Disturb\"'><div class='avatar status dnd' style='background-image: url(https://services.xxx.com/emppics/{workforceID}.jpg);''><span><em></em></span></div>",
          "     <tpl else>",
          "         <div class='avatar status offline' style='background-image: url(https://services.xxx.com/emppics/{workforceID}.jpg);'><span><em></em></span></div>",
          "     </tpl>",
        "       </tpl>",
        "   </tpl>",
        "   <ul class='data'>",
        "      <li><h3><strong>{fullName}</strong></h3></li>",
        "      <tpl if='title != undefined && title != null'><li><span class=\"userTitle\">{title}</span></li></tpl>",
        "      <tpl if='roomNumber != undefined && roomNumber != null && roomNumber != \"\"'><li><span class=\"userOffice\">Office: {roomNumber}</span></li></tpl>",
        "   </ul>",
        "</div>"
    ]

ステータスの Ajax 呼び出しは次のようになります。

function getUserPresence (record) {
    var email = record.get('mail');
    if (email && email !== 'NULL') { // Need to actually check for text value of NULL :(
        // Get Users' Presence
        Ext.data.JsonP.request({
            url: Global.presenceUrl + encodeURIComponent(email),
            callbackKey: 'callback',
            disableCaching: false,
            success: function (result, request) {
                if (result) {
                    var presence = result.Availability;
                    record.set('presence', presence);
                }
            },
            failure: function () {
                console.log('Unable to obtain Lync presence at this time');
            },
            timeout: 15000, //if no response something is wrong and just cancel
            scope: this
        });
    }
}

JSONP 呼び出しをプルすると、もちろん画像はすぐに読み込まれるため、JSONP 呼び出しが背景画像の読み込みをブロックする理由がわかりません。JSONP 呼び出しにかかる時間に関係なく、ブラウザは画像を取得するべきではありませんか?

4

1 に答える 1

0

私が見つけた最善の解決策は、CSS ではなく<img>タグを使用することでした。だから今私のコードは次のようになります：

<div class='avatar status available'><img onerror='imgError(this)' src='https://services.xxx.com/pics/{id}.jpg'/></div>

これにより、画像がブロックされることなく期待どおりに読み込まれ、デフォルトの画像を送信するのに画像が悪い場合はエラーをチェックできるという利点があります。

function imgError (image) {
    image.onerror = function () {
        this.parent().addClass('user');
    }
    image.src = "/resources/img/user.png";
    return true;
}
于 2013-04-19T18:18:45.250 に答える