0

我正在使用 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("refresh");

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的渲染过程在加载图像之前完成（实际上一旦加载图像，问题就不会发生，重新加载相同的listview）。

如何强制渲染图像？（我尝试使用 jquery .live，但没有运气）（我正在使用 android 4 手机进行测试）

编辑我在调用附加后发现了这个问题的可怕补丁：refreshListView(listviewPreferiti,8); （我试过 $('img').trigger('refresh') 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);
    }
}
4

1 回答 1

1

JavaScriptImage对象有一个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>的src属性。<img>然后，您可以为jQuery 在您的 HTML 中找到的每个标签设置一个类似上述的回调。加载图像后，您可以将其附加到文档中。

这是jsFiddle中的一个示例

于 2012-05-30T19:06:21.547 回答