Question

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

博客链接为：https://futuremag-demo.blogspot.com

Answer 1

特色文章部分要求使用JavaScript进行渲染，但目前只有在页面上所有HTML加载完毕后才执行Javascript（可能是为了防止渲染阻塞问题）。

当前<span data-type="recent"></span>是HTML / Javascript小部件中唯一的呈现特色文章部分的HTML。在后台，当JavaScript检测到以上HTML时，它将对特定的Blogger提要（/feeds/posts/default?alt=json-in-script&max-results=4）进行Ajax调用，以使帖子显示在该部分中。

解决此问题的一种方法是，在小部件中出现的HTML <span data-type="recent"></span>之后移动负责呈现此特色部分的JS代码段。负责此部分的特定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')
                        })
                    })
                })
            }
        })
    }
});

Answer 2

分析网站后，发现上述图片的尺寸过大，导致加载缓慢。

可以使用称为lossless compression的技术对其进行压缩，以在不影响图像分辨率的情况下最小化尺寸。

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

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

2 个答案: