在我的页面上加载图像的时间如此之长,改进了吗?

时间:2014-05-26 12:19:58

标签: html css html5

我的网页从几个新闻Feed中加载了一些新闻文章。解析完成后,目的是创建一个并排有4篇文章的行,并显示与文章相关的图像。

Everthing工作正常,但加载时间很长。也许,我犯了一个错误,或者应该在我的代码上找到改进。

你能帮我吗?

[编辑]

网络标签的屏幕截图:

enter image description here

结果如下:

enter image description here

这是允许创建此接口的循环:

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");
                }

            }

0 个答案:

没有答案