1

我有以下 jQuery 使用带有 li 状态项的 ul 将状态加载到配置文件页面。each() 从 JSON 回调中获取项目，并且 load() 应该确保在创建 li 之前图像可用：

（showpic() 为我提供了一个格式良好的 url 以供使用。）

function showStatus(data){
var jsondata = $.parseJSON(data);
var testText = "";

$('#doNews').empty();
$('#doNews').append($('<ul/>', {"class": "newsList", id: "theNews"}));
$.each(jsondata, function(i, item){
    $('<img src="' + showpic(item[3]) + '" class="newsImage">')
    .load(function(){
        $(this)
            .appendTo($('#theNews'))
            .wrap($('<li>', {"class": "newsItem"}))
            .closest('li')
            .append(item[5])
      });
});

$("#statustext").val('');
}

问题是状态提要现在似乎按照图像加载的顺序写入页面。即，不是按照 JSON 项目顺序编写，而是按照加载图像的顺序编写 lis（这具有按用户分组状态的效果，而不是按日期写出，如 JSON 中那样）。

那么......我将如何以 JSON 顺序编写项目并仍然等待 img 加载？

顺便说一句，我看了这个qn： jQuery each() and load() ordering

它似乎在正确的轨道上，但是当我尝试在 load() 函数中使用 hide() 然后 show() 时，它似乎从未被调用，并且 img 保持隐藏状态。如果这是您建议的解决方案，请给我一个简单的例子。

谢谢！

4

1 回答 1

2

任何一个：

1）维护一个计数器和超时，计算开始时要加载的图像数量，将项目创建为“隐藏”，在加载时倒数卸载的数量，然后（当计数器达到 0 或计时器超时时）显示所有内容；

或者：

2）将项目创建为隐藏，并在“加载”事件中显示它们。项目将以任意顺序出现，但最终会被正确排序。

这是一个可能的示例：您的代码对于正在构建的结构和附加位置不是很清楚，所以这只是一个粗略（但编码清晰）的大纲。

尝试更多地使用中间变量，而不是使用大量美妙的 jQuery 结构。它将帮助您调试它。

console.log('loading news items');
$.each( jsondata, function(i, item){ 
    console.log('  item', showpic(item[3]), item[5]);
    var img = $('<img src="' + showpic(item[3]) + '" class="newsImage" >');
    var element = img.wrap($('<li>', {"class": "newsItem", "style": "display:none;"}))
        .closest('li')
        .append(item[5]);
    element.appendTo( $('#theNews'));

    // when the IMG loads, find it's surrounding LI.. and show it.
    img.load( function(){
        console.log('  loaded', $(this).attr('src'));
        $(this).closest('li').show();
    });
    // put a timer & show it anyway after 8s, if img still hasn't loaded.
    element.delay( 8000).show(0);
});

您还会注意到登录代码。日志记录是良好的软件实践。Console.log 在 IE 上不可用，因此您最终应该填充它或使用您自己的小型库函数。

从根本上说，您必须避免在“加载”事件中添加到 DOM。这就是导致错误排序的原因。在 jsondata each() 函数中添加到 DOM，或者添加到一个单独的结构良好的代码中，以保证正确的排序。

于 2013-07-28T02:43:04.407 回答