我的网页从几个新闻Feed中加载了一些新闻文章。解析完成后,目的是创建一个并排有4篇文章的行,并显示与文章相关的图像。
Everthing工作正常,但加载时间很长。也许,我犯了一个错误,或者应该在我的代码上找到改进。
你能帮我吗?
[编辑]
网络标签的屏幕截图:
结果如下:
这是允许创建此接口的循环:
if (jsonObj.news) {
$('body').css('background', '#171717');
// Model for create div news element
function appendModel(news, lineToAppend) {
if (news) {
if (news.img.indexOf("-/http") !== -1) {
news.img = news.img.substring(news.img.indexOf("-/http")+2, news.img.length) ;
}
var model = '<div class="item"><div class="img-div"><img id="item_img" src="' + news.img + '" /></div><h2 id="item_text"><span id="dateNews">' + news.date.substring(5,16) + ' by </span><span id="sourceNews">' + news.from + '</span><img src="src/ui_template_demo_news/img/ic_action_share.png" class="sharingIcon" /><span id="titleNews">' + news.title + '</span><span id="urlHidden">' + news.link +'</span></h2></div>';
lineToAppend.append(model);
}
}
// New stuff
var lineCount = parseInt(jsonObj.news.length / 4);
for (var j=0; j<lineCount; j++) {
var line = $('<div id="line'+(j+1)+'"></div>');
for (var i=0; i<4 ; i++) {
appendModel(jsonObj.news[j*4 + i], line);
}
$(line).appendTo($('#content'));
}
var allLines = $('div[id*=line]') ;
for (var i=1; i<allLines.length ; i++) {
$(allLines[i]).css("display", "flex");
$(allLines[i]).css("margin-top", "15px");
}
}