Html and javascript getting response before page load?

Question

JavaScript

Hello! Situation. I'm loading likes for a post via AJAX using the POST method. There is a span on the page

<div class="pull-right"><i class="fa fa-heart" id="like" onclick="addlike(@Html.Raw(item.ID))"></i> <span id="[email protected](item.ID)" onload="getlike(@Html.Raw(item.ID))"></span></div>

As you can see, when onload it calls the getlike (2) function, for example, yes? So, I have scripts in the footer of the page in order to increase the speed of loading content on the page. This is the problem, when loading the span, my scripts have not even been created yet, and it turns out that the span calls getlike (2), which is not yet ready.
At the footer of the page is the following api:

<script>
    document.addEventListener('DOMContentLoaded', function () {
        function getlike(id) {
            var like = $('#like_' + id);
            var count = 0;
            $.ajax({
                type: 'POST',
                url: '/api/values/Getlike/' + id,
                success: function (data) {
                    $('#like_' + id).text(data);
                    console.log('id: ' + id + 'data: ' + data);
                }
            });
        }
    });
</script>

And if you put the scripts in the site header, then everything will work with a bang, but I don’t need it because the content loading speed will drop and generally storing scripts in the site header is stupid, especially as huge as jQuery in my case. Tell me how you can solve this problem?

Answer 1

I would remove "onload" and in the script below instead of:

document.addEventListener('DOMContentLoaded', function () {
    function getlike(id) {
        var like = $('#like_' + id);
        // ...
    }
});

inserted something like:

$('span[id^="like_"]').each(function(index, like) {
    var id = like.id;
    // ...
});

PS And in a good way, all this should be received from the server with one request.

Answer 2

You won't get likes anyway until you load jquery.
Therefore, at the time of issuing html to the browser, you should already have data in your span with the number of likes.
Alternatively, you can try to write a small script for sending and receiving a request without jquery in pure javascript ( https://learn.javascript.ru/ajax-xmlhttprequest for help) and load it at the top of the page.
Besides, what for to you in attributes to hang up handlers of events?
Hang listeners better with the $('#myid').on('click', listener) construct.
In the current implementation, it would have to be something like this:
$(document).ready(function() {
/** will start working when the DOM is ready, except for images **/
var id = item.ID, // I don't know where you get this item.ID from
$.ajax({
type: 'POST',
url: '/api/values/Getlike/' + id,
success: function (data) {
$('#like_' + id).text(data);
console.log('id: ' + id + 'data: ' + data);
}
});
});