jquery移动图像动态加载

时间:2012-05-30 13:59:23

标签: javascript jquery html5 jquery-mobile

我正在使用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);
    }
}

1 个答案:

答案 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

中的示例