Css 在我的页面上加载这么长时间的图像，有什么改进吗？

我的网页从几个新闻源加载一些新闻文章。解析完成后，prupose将创建一行，其中并排包含4篇文章，并显示与该文章关联的图像

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

你能帮我吗

[编辑]

网络选项卡的屏幕截图：

结果如下：

下面是允许创建此接口的循环：

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

            }

if（jsonObj.news）{
$（'body'）.css（'background'，'#171717'）；
//创建div新闻元素的模型
函数附录模型（新闻、行到附录）{
国际单项体育联合会（新闻）{
如果（news.img.indexOf（“-/http”）！=-1）{
news.img=news.img.substring（news.img.indexOf（“-/http”）+2，news.img.length）；
}
var模型=“”+news.date.substring（5,16）+”由“+news.from+“”+news.title+“”+news.link+”；
lineToAppend.append（模型）；
}
}
//新东西
var lineCount=parseInt（jsonObj.news.length/4）；
对于（var j=0；jt）加载时间过长有许多潜在原因（例如图像大小、dns查找等）。出于可用性原因，我建议您添加一个加载指示器。此外，您还应向我们提供更多信息，如：网络选项卡的屏幕截图（在web开发者工具中），图像的大小等。您的代码似乎没有问题。@Sven我添加了“网络”选项卡的快照。似乎浏览器尝试多次加载每个图像。我肯定会使用CDN（cloudflare.com）看看你是否可以裁剪和/或调整图像的大小到更小的大小，以用作缩略图，并在单击文章时显示原始大小的图像。@user3608176这可能是一个解决方案。也许我可以找到一个脚本来裁剪/调整每个图像的大小，然后再在Tag中设置。如果使用PHP，你可以使用ImageManipulator脚本和教程有关使用此脚本的详细信息，请参见此处