How to place a callback script in bottom of the body tag?

Question

I am using blogger for few a few months. I found an archive Plain JavaScript from a blogging tutorial blog. Wherever I paste the script, it loads the archive posts successfully. But it takes several seconds to display the output and blocking the remaining page contents.

I want to place the JavaScript in the bottom of the body tag. I haven’t much idea to modify this script to load from the bottom of the body tag. It may not block the other contents if it placed in the bottom of the page.

The HTML

<body>
    
<header>
</header>

<div class="contents">
    <div class="blog-posts"></div>
    <div class="static_archive">
        Archive output here. 
        <!-- If I place the script here, it runs ok but blocking the remaing contents of the page untill it loaded. -->
    </div>
    <aside>
        <div class="widget1">
            <div class="archive"></div>
        </div>
    </aside>
</div>

<footer>
</footer>

<script>
    //I need Javascript placement here.
</script>
    
</body>

The JavaScript

<script>
function LoadTheArchive(TotalFeed) {
    var PostTitles = new Array();
    var PostURLs = new Array();
    var PostYears = new Array();
    var PostMonths = new Array();
    var PostDays = new Array();
    if ("entry" in TotalFeed.feed) {
        var PostEntries = TotalFeed.feed.entry.length;
        for (var PostNum = 0; PostNum < PostEntries; PostNum++) {
            var ThisPost = TotalFeed.feed.entry[PostNum];
            PostTitles.push(ThisPost.title.$t);
            PostYears.push(ThisPost.published.$t.substring(0, 4));
            PostMonths.push(ThisPost.published.$t.substring(5, 7));
            PostDays.push(ThisPost.published.$t.substring(8, 10));
            var ThisPostURL;
            for (var LinkNum = 0; LinkNum < ThisPost.link.length; LinkNum++) {
                if (ThisPost.link[LinkNum].rel == "alternate") {
                    ThisPostURL = ThisPost.link[LinkNum].href;
                    break
                }
            }
            PostURLs.push(ThisPostURL);
        }
    }
    DisplaytheTOC(PostTitles, PostURLs, PostYears, PostMonths, PostDays);
}
    
function DisplaytheTOC(PostTitles, PostURLs, PostYears, PostMonths, PostDays) {
    var MonthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
    var NumberOfEntries = PostTitles.length;
    var currentMonth = "";
    var currentYear = "";
    for (var EntryNum = 0; EntryNum < NumberOfEntries; EntryNum++) {
        NameOfMonth = MonthNames[parseInt(PostMonths[EntryNum], 10) - 1]
        if (currentMonth != NameOfMonth || currentYear != PostYears[EntryNum]) {
            currentMonth = NameOfMonth;
            currentYear = PostYears[EntryNum];
            document.write("<br><div class='dateStyle'>" + currentMonth + " " + currentYear + "</div>");
        }
        var parsed_day = parseInt(PostDays[EntryNum], 10) > 9 ? "" + parseInt(PostDays[EntryNum], 10) : "0" + parseInt(PostDays[EntryNum], 10);
        document.write("<div class='dayStyle'>" + parsed_day + ":&nbsp;&nbsp;</div><a href='" + PostURLs[EntryNum] + "'>" + PostTitles[EntryNum] + "</a><br>");
    }
}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=150&amp;start-index=1&amp;callback=LoadTheArchive" type="text/javascript">
</script>

I am just a beginner in HTML and JavaScript. Any idea friends?

Have you tried after putting your code in bottom? if yes then what happened? Yes you can put your code there as you pointed. — turivishal, Jun 29 '20 at 14:54
if you mean ```document.ready``` look at here: https://stackoverflow.com/questions/9899372/pure-javascript-equivalent-of-jquerys-ready-how-to-call-a-function-when-t — Vahid Alimohamadi, Jun 29 '20 at 14:57
Tried `window.onload = function () {}` but the same problem exists. Placed the script in the bottom of the page but it couldn't run. — Anivep, Jun 29 '20 at 15:45

How to place a callback script in bottom of the body tag?

0 Answers0