如何推迟或异步执行此JS脚本代码？

Question

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,cb-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 ...

Answer 1

defer or async change the load timing of your scripts and thus will change when your script executes and thus will change the timing of the document.write() statements in your rcentbytag() function.

Since the rcentbytag() function is inserting content into your page with document.write() , you can't change the location of that script in the page unless you rewrite it not to use document.write() and to insert content into the appropriate place in the page another way (such as .appendChild() ).

So, if you want to defer the loading of the script that calls rcentbytag() , then you will have to rewrite rcentbytag() to insert the content it puts into the page a different way that does not use document.write() .

You will have a lot more options when you remove all use of document.write() . Besides getting in your way here, it can also slow down the loader for a variety of reasons.

Your script that uses document.write() works out to be this when it's decompressed:

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>")
}

It is possible to replace all the document.write() calls in that with a new function that just accumulates the HTML and then insert all that HTML once at the end into a previously placed div in your document:

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

Then, you can change your HTML to this. This inserts a placeholder <div> which is a place for the content to be added and you used the revised rcentbytag() that inserts the HTML into that div and then you can use defer on the feeds script and it will call rcentbytag() which will insert the content appropriately:

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