为什么我的背景图像被延迟了
Why are my background images being delayed?
我在Sencha Touch 2.1.1中使用一个项目模板来显示一个状态,一个pic和一些关于用户的详细信息,作为列表中的一个项目。当我加载页面时,我看到加载所有图片的延迟,除了第一张,这大约需要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调用需要多长时间都去获取图像吗?
我发现最好的解决方案是不使用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;
}
相关文章:
- 延迟加载背景图像时防止双重请求
- 使用JavaScript延迟图像加载
- 在引用磁盘上的图像时,Cordova中的短延迟(500ms?)
- 实现延迟在滚动上加载未知大小的图像并最佳定位的图像库
- Javascript (Mobile) - 使用 jquery 延迟加载图像
- 在定时器/延迟的画布上移动不同的图像
- Javascript - 预加载的图像渲染延迟(仅限第一次)
- 延迟加载带有图像的HTML5部分
- 延迟加载由 appendChild() 在 javascript/leaflet 中附加的图像
- 在附加内容之前延迟加载图像
- 将图像不可见地预加载到 DOM 中,而不会延迟页面加载
- 在延迟加载的图像上使用jQuery缩放
- 延迟一些jQuery函数,直到所有图像完全加载
- jQuery 在实时搜索后延迟加载图像
- 在大多数移动浏览器上,图像仅在出现重大延迟后才会更改
- 通过JavaScript加载SPDY和延迟图像
- 如何用数据URI延迟图像加载
- 想要延迟图像跟随我的鼠标光标
- 延迟图像用于显示目的,而不是使用javascript的效率
- 延迟图像切换javascript