Загрузка GIF во время запроса AJAX добавить

Question

У меня есть запрос AJAX для добавления данных и div с GIF. Мне нужно показать этот GIF при загрузке контента и скрыть при завершении.

Ajax:

<script>
    $(window).scroll(function () {
        if ($(window).scrollTop() == $(document).height() - $(window).height()) {
            $("#load-hist").show();
            $.ajax({
                url: "@Url.Action("pageCount", "Home")",
                type: "POST",
                contentType: 'application/json',
                data: JSON.stringify({ start: true }),
                success: function (data) {
                    $("#sidebar-filter-result").html(data);
                    $("#load-hist").hide();
                }
            });
        }
    });
</script>

HTML:

<div class="row box-js base-box-form" id="sidebar-filter-result">

                    @Html.Action("ListHistory", "Sidebar")

                </div>
                <p style="text-align: center;">
                    <img id="load-hist" src="~/Content/css/main-load-gif.gif" alt="Loading..." style="display:none" />
                </p>

Без $("#load-hist").show(); и $("#load-hist").hide(); это работает хорошо, но когда я добавляю этот gif, все ломается при загрузке ...