爲什麼我的背景圖片被延遲？

我在Sencha Touch 2.1.1中使用了一個項目模板來顯示一個狀態，一個圖片以及關於該用戶的一些細節，作爲一個列表中的一個項目。當我加載頁面時，我看到加載所有圖片的延遲，除了第一個圖片被加載，只要JSONP調用拉取狀態。你可以看到here。爲什麼我的背景圖片被延遲？

我的模板是非常簡單的：

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調用需要多長時間？

來源

2013-04-19 occasl

我不能說明確，但JSONP的工作方式是通過插入腳本標記來完成請求。也許瀏覽器阻止任何圖像加載，直到腳本標記完成。 –

我發現的最佳解決方案不是使用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-19 18:18:45 occasl

爲什麼我的背景圖片被延遲？

回答

相關問題