如何更改元素在主页上的加载顺序？

Question

出于某种原因，我的博客主页开始加载到页面的一半，然后在其上方的特色图片加载后滑到顶部。我不确定为什么要这样做。有谁知道我如何更改顺序以便它从页面顶部的第一个元素加载？

Link 到博客是：https://futuremag-demo.blogspot.com

Answer 1

分析网站后发现，上述图片尺寸较大，导致加载速度较慢。

它们可以使用一种称为 lossless compression 的技术进行压缩，以在不扭曲图像分辨率的情况下最小化尺寸。

使用（例如）压缩图像：https://compressjpeg.com/ 并再次测试。

Answer 2

特色 post 部分需要 JavaScript 才能呈现，但目前 Javascript 仅在页面上加载所有 HTML 后执行（可能会阻止呈现阻塞问题）。

目前 <span data-type="recent"></span> 是 HTML/Javascript 小部件中唯一 HTML 呈现特色 post 部分的小部件。在幕后，当 JavaScript 检测到上述 HTML 时，它会对特定的 Blogger 供稿 (/feeds/posts/default?alt=json-in-script&max-results=4) 进行 Ajax 调用以获取 posts显示在该部分。

解决此问题的一种方法是将负责呈现此特色部分的 JS 片段移动到小部件中出现的 HTML <span data-type="recent"></span> 之后。负责这部分的具体 JS 片段是 -

<script>
$('.featured .HTML .widget-content').each(function() {
    var v = $(this).find("span").attr("data-label"),
        box = $(this).find("span").attr("data-type");
    if (box.match('recent')) {
        $.ajax({
            url: "/feeds/posts/default?alt=json-in-script&max-results=4",
            type: 'get',
            dataType: "jsonp",
            success: function(e) {
                var u = "";
                var h = '<ul>';
                for (var i = 0; i < e.feed.entry.length; i++) {
                    for (var j = 0; j < e.feed.entry[i].link.length; j++) {
                        if (e.feed.entry[i].link[j].rel == "alternate") {
                            u = e.feed.entry[i].link[j].href;
                            break
                        }
                    }
                    var g = e.feed.entry[i].title.$t;
                    var s = e.feed.entry[i].category[0].term;
                    var y = e.feed.entry[i].author[0].name.$t;
                    var d = e.feed.entry[i].published.$t,
                        t = d.substring(0, 4),
                        w = d.substring(5, 7),
                        f = d.substring(8, 10),
                        r = month_format[parseInt(w, 10)] + ' ' + f + ', ' + t;
                    var c = e.feed.entry[i].content.$t;
                    var $c = $('<div>').html(c);
                    if (c.indexOf("//www.youtube.com/embed/") > -1) {
                        var p = e.feed.entry[i].media$thumbnail.url;
                        var k = p
                    } else if (c.indexOf("<img") > -1) {
                        var q = $c.find('img:first').attr('src');
                        var k = q
                    } else {
                        var k = no_image
                    }
                    h += '<li><div class="featured-inner"><a href="/search/label/' + s + '" class="post-tag icon ' + s + '">' + s + '</a><a class="rcp-thumb" href="' + u + '" style="background:url(' + k + ') no-repeat center center;background-size: cover"><span class="featured-overlay"/></a><div class="post-panel"><h3 class="rcp-title"><a href="' + u + '">' + g + '</a></h3><div class="featured-meta"><span class="featured-author idel">' + y + '</span><span class="featured-date">' + r + '</span></div></div></div></li>'
                }
                h += '</ul>';
                $(".featured .HTML .widget-content").each(function() {
                    $(this).html(h);
                    $(this).find('.rcp-thumb').each(function() {
                        $(this).attr('style', function(i, src) {
                            return src.replace('/default.jpg', '/mqdefault.jpg')
                        }).attr('style', function(i, src) {
                            return src.replace('s72-c', 's1600')
                        })
                    })
                })
            }
        })
    } else if (box.match('label')) {
        $.ajax({
            url: "/feeds/posts/default/-/" + v + "?alt=json-in-script&max-results=4",
            type: 'get',
            dataType: "jsonp",
            success: function(e) {
                var u = "";
                var h = '<ul>';
                for (var i = 0; i < e.feed.entry.length; i++) {
                    for (var j = 0; j < e.feed.entry[i].link.length; j++) {
                        if (e.feed.entry[i].link[j].rel == "alternate") {
                            u = e.feed.entry[i].link[j].href;
                            break
                        }
                    }
                    var g = e.feed.entry[i].title.$t;
                    var s = e.feed.entry[i].category[0].term;
                    var y = e.feed.entry[i].author[0].name.$t;
                    var d = e.feed.entry[i].published.$t,
                        t = d.substring(0, 4),
                        w = d.substring(5, 7),
                        f = d.substring(8, 10),
                        r = month_format[parseInt(w, 10)] + ' ' + f + ', ' + t;
                    var c = e.feed.entry[i].content.$t;
                    var $c = $('<div>').html(c);
                    if (c.indexOf("//www.youtube.com/embed/") > -1) {
                        var p = e.feed.entry[i].media$thumbnail.url;
                        var k = p
                    } else if (c.indexOf("<img") > -1) {
                        var q = $c.find('img:first').attr('src');
                        var k = q
                    } else {
                        var k = no_image
                    }
                    h += '<li><div class="featured-inner"><a href="/search/label/' + s + '" class="post-tag icon ' + s + '">' + s + '</a><a class="rcp-thumb" href="' + u + '" style="background:url(' + k + ') no-repeat center center;background-size: cover"><span class="featured-overlay"/></a><div class="post-panel"><h3 class="rcp-title"><a href="' + u + '">' + g + '</a></h3><div class="featured-meta"><span class="featured-author idel">' + y + '</span><span class="featured-date">' + r + '</span></div></div></div></li>'
                }
                h += '</ul>';
                $(".featured .HTML .widget-content").each(function() {
                    $(this).html(h);
                    $(this).find('.rcp-thumb').each(function() {
                        $(this).attr('style', function(i, src) {
                            return src.replace('/default.jpg', '/mqdefault.jpg')
                        }).attr('style', function(i, src) {
                            return src.replace('s72-c', 's1600')
                        })
                    })
                })
            }
        })
    }
});

如何更改元素在主页上的加载顺序？

How to change the order in which elements load on homepage?

html

blogger