html - 如何更改元素在主页上加载的顺序？
问题描述
出于某种原因，我的博客主页开始加载到页面的一半，然后在其上方的特色图片加载后滑动到顶部。我不确定它为什么这样做。有谁知道我可以如何更改顺序，以便从页面顶部的第一个元素加载？
解决方案
特色帖子部分需要 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 调用，以获取要在该部分中显示的帖子。
解决此问题的一种方法是将负责呈现此特色部分的 JS 片段移动到<span data-type="recent"></span>小部件中存在的 HTML 之后。负责本节的特定 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')
})
})
})
}
})
}
});