How can I defer or async this JS script code?

时间：2017-04-10 03:01:33

标签： javascript asynchronous deferred document.write

I have a problem with this code. I know that we can add async or defer for external scripts, but with this script I can't handle with the document.write("<script src=\"http://example...... , so when I add defer or async to that code the script stop working. Can anyone help me because this code made some render blocking problem with my blog.

This is the code:

<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>

Thank You ...

1 个答案:

答案 0 :(得分：0)

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>，这是一个可以添加内容的位置，您使用了将HTML插入该div的修订版rcentbytag()，然后您可以在Feed脚本上使用defer它会调用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>
相关问题
最新问题