Question

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

（showpic（）为我提供了一个结构良好的网址。）

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项目顺序编写，而是按加载图像的顺序编写（这具有用户对状态进行分组的效果，而不是像JSON那样按日期写出）。

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

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

它似乎在正确的轨道上，但是当我尝试在load（）函数中使用hide（）然后show（）时，它似乎永远不会被调用，并且img仍然是隐藏的。如果这是你建议的解决方案，请给我一个简单的例子。

谢谢！

Answer 1

或者：

1）维持一个柜台＆amp;超时，计算要在开始时加载的图像数，将项目创建为“隐藏”，倒计时加载时卸载的数量，然后（当计数器点击0或计时器超时时）显示所有内容;

或：

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

这是一个可能的例子：你的代码不是很清楚正在构建什么结构＆amp;在附加的地方，所以这只是一个粗略（但清晰编码）的轮廓。

尝试更多地使用中间变量，而不是使用自己的大量精彩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上不可用，因此您最终应该使用它自己来修补或使用自己的小库函数。

从根本上说，你必须避免在'load'事件中添加DOM。这就是造成错误排序的原因。在jsondata each（）函数中添加到DOM，或者在保证正确排序的单独结构良好的代码中添加。

jquery加载顺序影响列表

1 个答案: