我正在使用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( “刷新”);
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手机进行测试)
EDIT 我发现了这个问题的可怕补丁 在追加我调用之后:refreshListView(listviewPreferiti,8); (我尝试了$('img')。触发器('刷新')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);
}
}
答案 0 :(得分:1)
JavaScript Image
对象具有可以使用的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>
的{{1}}属性。然后,您可以为jQuery在HTML中找到的每个src
标记设置一个类似上面的回调。加载图像后,您可以将其附加到文档中。
以下是jsFiddle
中的示例