SharePoint page not showing images and dynamic hrml from content editor webpart

Question

I have a content editor webpart (SharePoint 2016) where i have some html content and some more html generated after an ajax call is executed on document.ready jquery. Everything is working fine but sometimes randomly the page doesnt show any content, the page is totally blank. But if i press F12, suddenly page shows my html content. This happens randomly and i cannot reproduce this issue manually. There is no error in the browser console. The content editor code is below:

<div class="top-banner">
    <img src="http://<site url>/Style%20Library/banner.png" alt="banner">
    <div class="tob-banner-wrapper">
        <h2 class="title">Process Automation</h2>
    </div>
</div>
<div class="department-section">
    <div class="container-fluid">
        <div class="row" id="deptNavRow">
        </div>
    </div>
</div>
<script>
    $(document).ready(function () {
        getListItems(_spPageContextInfo.webAbsoluteUrl, 'Master.Departments')//gets the items from this list which will have title and image links
            .done(function (data) {
                var items = data.d.results;
                var count = items.length;
                generateHomeTile(items);
            })
            .fail(
                function (error) {
                    console.log(JSON.stringify(error));
                });
    });
    function generateHomeTile(items) {
        var deptHtml = '';
        //logic for looping through items and generating html
        $('#deptNavRow').append(deptHtml);
    }
</script>