我正在使用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调用需要多长时间的图像?
答案 0 :(得分: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;
}