如何延迟或异步此 JS 脚本代码?
How can I defer or async this JS script code?
我对这段代码有疑问。我知道我们可以为外部脚本添加 async 或 defer,但是使用这个脚本我无法处理 document.write("<script src=\"http://example......
,所以当我向该代码添加 defer 或 async 时,脚本停止工作。任何人都可以帮助我,因为这段代码使我的博客出现渲染阻塞问题。
这是代码:
<script type='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var showpostdate = false;</script>
<script type='text/javascript'>
//<![CDATA[
// Recent Post By Tag
// Recent Post By Tag For Blogger
function rcentbytag(e){document.write('<ul class="recent-by-tag">');for(var t=0;t<numposts;t++){var n=e.feed.entry[t];var r=n.title.$t;var i;if(t==e.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if(n.link[o].rel=="replies"&&n.link[o].type=="text/html"){var u=n.link[o].title;var f=n.link[o].href}if(n.link[o].rel=="alternate"){i=n.link[o].href;break}}var l;try{l=n.media$thumbnail.url}catch(h){s=n.content.$t;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);if(a!=-1&&b!=-1&&c!=-1&&d!=""){l=d}else l="http://2.bp.blogspot.com/-giova1ZCh-A/Uzq6L8QTJNI/AAAAAAAAAJc/USXictTq_xs/s70-c/KM+Icon.png"}var p=n.published.$t;var v=p.substring(0,4);var m=p.substring(5,7);var g=p.substring(8,10);var y=new Array;y[1]="Januari";y[2]="Februari";y[3]="Maret";y[4]="April";y[5]="Mei";y[6]="Juni";y[7]="Juli";y[8]="Agustus";y[9]="September";y[10]="Oktober";y[11]="November";y[12]="Desember";document.write('<li class="clear">');if(showpostthumbnails==true)document.write('<a href="'+i+'" target ="_blank" title="'+r+'"><img class="rct-thumb" alt="'+r+'" src="'+l+'"/></a>');document.write('<strong><a href="'+i+'" target ="_blank" title="'+r+'">'+r+'</a></strong>');document.write('<br>');var x="";var T=0;if(showpostdate==true){x='<span class="showdates">'+x+g+" "+y[parseInt(m,10)]+" "+v+"</span>";T=1}document.write(x);document.write("</li>");if(t!=numposts-1)document.write("")}document.write("</ul>")}
//]]>
</script>
<script>
document.write("<script src=\"http://example.blogspot.com/feeds/posts/default/-/LabelHere?orderby=published&alt=json-in-script&callback=rcentbytag\"><\/script>");
</script>
谢谢...
defer
或 async
更改脚本的加载时间,因此会在脚本执行时更改,从而会更改 document.write()
语句中的时间 rcentbytag()
函数。
由于 rcentbytag()
函数使用 document.write()
将内容插入您的页面,您无法更改该脚本在页面中的位置,除非您将其重写为不使用 document.write()
并以另一种方式将内容插入页面中的适当位置(例如 .appendChild()
)。
因此,如果您想延迟加载调用 rcentbytag()
的脚本,则必须重写 rcentbytag()
以将其放入页面的内容以不同的方式插入不使用 document.write()
.
如果您不再使用 document.write()
,您将有更多选择。除了在这里妨碍您之外,它还会因各种原因减慢加载程序。
你使用document.write()
的脚本解压后是这样的:
function rcentbytag(e) {
document.write('<ul class="recent-by-tag">');
for (var t = 0; t < numposts; t++) {
var n = e.feed.entry[t];
var r = n.title.$t;
var i;
if (t == e.feed.entry.length) break;
for (var o = 0; o < n.link.length; o++) {
if (n.link[o].rel == "replies" && n.link[o].type == "text/html") {
var u = n.link[o].title;
var f = n.link[o].href
}
if (n.link[o].rel == "alternate") {
i = n.link[o].href;
break
}
}
var l;
try {
l = n.media$thumbnail.url
} catch (h) {
s = n.content.$t;
a = s.indexOf("<img");
b = s.indexOf('src="', a);
c = s.indexOf('"', b + 5);
d = s.substr(b + 5, c - b - 5);
if (a != -1 && b != -1 && c != -1 && d != "") {
l = d
} else l = "http://2.bp.blogspot.com/-giova1ZCh-A/Uzq6L8QTJNI/AAAAAAAAAJc/USXictTq_xs/s70-c/KM+Icon.png"
}
var p = n.published.$t;
var v = p.substring(0, 4);
var m = p.substring(5, 7);
var g = p.substring(8, 10);
var y = new Array;
y[1] = "Januari";
y[2] = "Februari";
y[3] = "Maret";
y[4] = "April";
y[5] = "Mei";
y[6] = "Juni";
y[7] = "Juli";
y[8] = "Agustus";
y[9] = "September";
y[10] = "Oktober";
y[11] = "November";
y[12] = "Desember";
document.write('<li class="clear">');
if (showpostthumbnails == true) document.write('<a href="' + i + '" target ="_blank" title="' + r + '"><img class="rct-thumb" alt="' + r + '" src="' + l + '"/></a>');
document.write('<strong><a href="' + i + '" target ="_blank" title="' + r + '">' + r + '</a></strong>');
document.write('<br>');
var x = "";
var T = 0;
if (showpostdate == true) {
x = '<span class="showdates">' + x + g + " " + y[parseInt(m, 10)] + " " + v + "</span>";
T = 1
}
document.write(x);
document.write("</li>");
if (t != numposts - 1) document.write("")
}
document.write("</ul>")
}
可以用一个新函数替换其中的所有 document.write()
调用,该函数仅累积 HTML,然后在末尾将所有 HTML 插入到先前的将 div 放入您的文档中:
function rcentbytag(e) {
var storedHTML = "";
function saveHTML(h) {
storedHTML += h;
}
saveHTML('<ul class="recent-by-tag">');
for (var t = 0; t < numposts; t++) {
var n = e.feed.entry[t];
var r = n.title.$t;
var i;
if (t == e.feed.entry.length) break;
for (var o = 0; o < n.link.length; o++) {
if (n.link[o].rel == "replies" && n.link[o].type == "text/html") {
var u = n.link[o].title;
var f = n.link[o].href
}
if (n.link[o].rel == "alternate") {
i = n.link[o].href;
break
}
}
var l;
try {
l = n.media$thumbnail.url
} catch (h) {
s = n.content.$t;
a = s.indexOf("<img");
b = s.indexOf('src="', a);
c = s.indexOf('"', b + 5);
d = s.substr(b + 5, c - b - 5);
if (a != -1 && b != -1 && c != -1 && d != "") {
l = d
} else l = "http://2.bp.blogspot.com/-giova1ZCh-A/Uzq6L8QTJNI/AAAAAAAAAJc/USXictTq_xs/s70-c/KM+Icon.png"
}
var p = n.published.$t;
var v = p.substring(0, 4);
var m = p.substring(5, 7);
var g = p.substring(8, 10);
var y = new Array;
y[1] = "Januari";
y[2] = "Februari";
y[3] = "Maret";
y[4] = "April";
y[5] = "Mei";
y[6] = "Juni";
y[7] = "Juli";
y[8] = "Agustus";
y[9] = "September";
y[10] = "Oktober";
y[11] = "November";
y[12] = "Desember";
saveHTML('<li class="clear">');
if (showpostthumbnails == true) saveHTML('<a href="' + i + '" target ="_blank" title="' + r + '"><img class="rct-thumb" alt="' + r + '" src="' + l + '"/></a>');
saveHTML('<strong><a href="' + i + '" target ="_blank" title="' + r + '">' + r + '</a></strong>');
saveHTML('<br>');
var x = "";
var T = 0;
if (showpostdate == true) {
x = '<span class="showdates">' + x + g + " " + y[parseInt(m, 10)] + " " + v + "</span>";
T = 1
}
saveHTML(x);
saveHTML("</li>");
if (t != numposts - 1) saveHTML("")
}
saveHTML("</ul>")
document.getElementById("rcentDiv").innerHTML = storedHTML;
}
然后,你可以把你的HTML改成这个。这会插入一个占位符 <div>
,这是要添加内容的地方,您使用修改后的 rcentbytag()
将 HTML 插入 div,然后您可以使用 defer
在 feeds 脚本上,它将调用 rcentbytag()
这将适当地插入内容:
<div id="rcentDiv"></div>
<script type='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var showpostdate = false;
// Recent Post By Tag
// Recent Post By Tag For Blogger
// insert revised rcentbytag() code here
</script>
<script defer src="http://example.blogspot.com/feeds/posts/default/-/LabelHere?orderby=published&alt=json-in-script&callback=rcentbytag"></script>
我对这段代码有疑问。我知道我们可以为外部脚本添加 async 或 defer,但是使用这个脚本我无法处理 document.write("<script src=\"http://example......
,所以当我向该代码添加 defer 或 async 时,脚本停止工作。任何人都可以帮助我,因为这段代码使我的博客出现渲染阻塞问题。
这是代码:
<script type='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var showpostdate = false;</script>
<script type='text/javascript'>
//<![CDATA[
// Recent Post By Tag
// Recent Post By Tag For Blogger
function rcentbytag(e){document.write('<ul class="recent-by-tag">');for(var t=0;t<numposts;t++){var n=e.feed.entry[t];var r=n.title.$t;var i;if(t==e.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if(n.link[o].rel=="replies"&&n.link[o].type=="text/html"){var u=n.link[o].title;var f=n.link[o].href}if(n.link[o].rel=="alternate"){i=n.link[o].href;break}}var l;try{l=n.media$thumbnail.url}catch(h){s=n.content.$t;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);if(a!=-1&&b!=-1&&c!=-1&&d!=""){l=d}else l="http://2.bp.blogspot.com/-giova1ZCh-A/Uzq6L8QTJNI/AAAAAAAAAJc/USXictTq_xs/s70-c/KM+Icon.png"}var p=n.published.$t;var v=p.substring(0,4);var m=p.substring(5,7);var g=p.substring(8,10);var y=new Array;y[1]="Januari";y[2]="Februari";y[3]="Maret";y[4]="April";y[5]="Mei";y[6]="Juni";y[7]="Juli";y[8]="Agustus";y[9]="September";y[10]="Oktober";y[11]="November";y[12]="Desember";document.write('<li class="clear">');if(showpostthumbnails==true)document.write('<a href="'+i+'" target ="_blank" title="'+r+'"><img class="rct-thumb" alt="'+r+'" src="'+l+'"/></a>');document.write('<strong><a href="'+i+'" target ="_blank" title="'+r+'">'+r+'</a></strong>');document.write('<br>');var x="";var T=0;if(showpostdate==true){x='<span class="showdates">'+x+g+" "+y[parseInt(m,10)]+" "+v+"</span>";T=1}document.write(x);document.write("</li>");if(t!=numposts-1)document.write("")}document.write("</ul>")}
//]]>
</script>
<script>
document.write("<script src=\"http://example.blogspot.com/feeds/posts/default/-/LabelHere?orderby=published&alt=json-in-script&callback=rcentbytag\"><\/script>");
</script>
谢谢...
defer
或 async
更改脚本的加载时间,因此会在脚本执行时更改,从而会更改 document.write()
语句中的时间 rcentbytag()
函数。
由于 rcentbytag()
函数使用 document.write()
将内容插入您的页面,您无法更改该脚本在页面中的位置,除非您将其重写为不使用 document.write()
并以另一种方式将内容插入页面中的适当位置(例如 .appendChild()
)。
因此,如果您想延迟加载调用 rcentbytag()
的脚本,则必须重写 rcentbytag()
以将其放入页面的内容以不同的方式插入不使用 document.write()
.
如果您不再使用 document.write()
,您将有更多选择。除了在这里妨碍您之外,它还会因各种原因减慢加载程序。
你使用document.write()
的脚本解压后是这样的:
function rcentbytag(e) {
document.write('<ul class="recent-by-tag">');
for (var t = 0; t < numposts; t++) {
var n = e.feed.entry[t];
var r = n.title.$t;
var i;
if (t == e.feed.entry.length) break;
for (var o = 0; o < n.link.length; o++) {
if (n.link[o].rel == "replies" && n.link[o].type == "text/html") {
var u = n.link[o].title;
var f = n.link[o].href
}
if (n.link[o].rel == "alternate") {
i = n.link[o].href;
break
}
}
var l;
try {
l = n.media$thumbnail.url
} catch (h) {
s = n.content.$t;
a = s.indexOf("<img");
b = s.indexOf('src="', a);
c = s.indexOf('"', b + 5);
d = s.substr(b + 5, c - b - 5);
if (a != -1 && b != -1 && c != -1 && d != "") {
l = d
} else l = "http://2.bp.blogspot.com/-giova1ZCh-A/Uzq6L8QTJNI/AAAAAAAAAJc/USXictTq_xs/s70-c/KM+Icon.png"
}
var p = n.published.$t;
var v = p.substring(0, 4);
var m = p.substring(5, 7);
var g = p.substring(8, 10);
var y = new Array;
y[1] = "Januari";
y[2] = "Februari";
y[3] = "Maret";
y[4] = "April";
y[5] = "Mei";
y[6] = "Juni";
y[7] = "Juli";
y[8] = "Agustus";
y[9] = "September";
y[10] = "Oktober";
y[11] = "November";
y[12] = "Desember";
document.write('<li class="clear">');
if (showpostthumbnails == true) document.write('<a href="' + i + '" target ="_blank" title="' + r + '"><img class="rct-thumb" alt="' + r + '" src="' + l + '"/></a>');
document.write('<strong><a href="' + i + '" target ="_blank" title="' + r + '">' + r + '</a></strong>');
document.write('<br>');
var x = "";
var T = 0;
if (showpostdate == true) {
x = '<span class="showdates">' + x + g + " " + y[parseInt(m, 10)] + " " + v + "</span>";
T = 1
}
document.write(x);
document.write("</li>");
if (t != numposts - 1) document.write("")
}
document.write("</ul>")
}
可以用一个新函数替换其中的所有 document.write()
调用,该函数仅累积 HTML,然后在末尾将所有 HTML 插入到先前的将 div 放入您的文档中:
function rcentbytag(e) {
var storedHTML = "";
function saveHTML(h) {
storedHTML += h;
}
saveHTML('<ul class="recent-by-tag">');
for (var t = 0; t < numposts; t++) {
var n = e.feed.entry[t];
var r = n.title.$t;
var i;
if (t == e.feed.entry.length) break;
for (var o = 0; o < n.link.length; o++) {
if (n.link[o].rel == "replies" && n.link[o].type == "text/html") {
var u = n.link[o].title;
var f = n.link[o].href
}
if (n.link[o].rel == "alternate") {
i = n.link[o].href;
break
}
}
var l;
try {
l = n.media$thumbnail.url
} catch (h) {
s = n.content.$t;
a = s.indexOf("<img");
b = s.indexOf('src="', a);
c = s.indexOf('"', b + 5);
d = s.substr(b + 5, c - b - 5);
if (a != -1 && b != -1 && c != -1 && d != "") {
l = d
} else l = "http://2.bp.blogspot.com/-giova1ZCh-A/Uzq6L8QTJNI/AAAAAAAAAJc/USXictTq_xs/s70-c/KM+Icon.png"
}
var p = n.published.$t;
var v = p.substring(0, 4);
var m = p.substring(5, 7);
var g = p.substring(8, 10);
var y = new Array;
y[1] = "Januari";
y[2] = "Februari";
y[3] = "Maret";
y[4] = "April";
y[5] = "Mei";
y[6] = "Juni";
y[7] = "Juli";
y[8] = "Agustus";
y[9] = "September";
y[10] = "Oktober";
y[11] = "November";
y[12] = "Desember";
saveHTML('<li class="clear">');
if (showpostthumbnails == true) saveHTML('<a href="' + i + '" target ="_blank" title="' + r + '"><img class="rct-thumb" alt="' + r + '" src="' + l + '"/></a>');
saveHTML('<strong><a href="' + i + '" target ="_blank" title="' + r + '">' + r + '</a></strong>');
saveHTML('<br>');
var x = "";
var T = 0;
if (showpostdate == true) {
x = '<span class="showdates">' + x + g + " " + y[parseInt(m, 10)] + " " + v + "</span>";
T = 1
}
saveHTML(x);
saveHTML("</li>");
if (t != numposts - 1) saveHTML("")
}
saveHTML("</ul>")
document.getElementById("rcentDiv").innerHTML = storedHTML;
}
然后,你可以把你的HTML改成这个。这会插入一个占位符 <div>
,这是要添加内容的地方,您使用修改后的 rcentbytag()
将 HTML 插入 div,然后您可以使用 defer
在 feeds 脚本上,它将调用 rcentbytag()
这将适当地插入内容:
<div id="rcentDiv"></div>
<script type='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var showpostdate = false;
// Recent Post By Tag
// Recent Post By Tag For Blogger
// insert revised rcentbytag() code here
</script>
<script defer src="http://example.blogspot.com/feeds/posts/default/-/LabelHere?orderby=published&alt=json-in-script&callback=rcentbytag"></script>