當滾動在窗口中間時，如何管理Ajax延遲加載請求

Question

我在項目中使用延遲加載。 使用https://www.c-sharpcorner.com/article/lazy-loading-in-asp-net-mvc/ refreence我想在滾動后和以慢速模式上傳圖像后希望進行ajax調用，並且不想滾動到加載器顯示為止我在用：-

 if ($(window).scrolltop() == $(document).height() -  $(window).height()) { 
     loadprojectdata(url); 
     } 

當我的滾動滾動到底部時此代碼有效，所以我看不到加載程序圖像。 每次當我到達底部ajax請求工作時，但我希望在加載fisrt圖像后工作

這是我的html：-

 @model IEnumerable<TechbitOfficalWebApp.Models.AlbumViewModel>

<!-- ==============================================
**Inner Banner**
=================================================== -->
<section class="inner-banner career-banner new-carrer-banner">
    <div class="container">
        <div class="contents">
            <h1>Our Gallery</h1>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <span>Lorem Ipsum has been the industry's standard dummy text ever since</span></p>
    </div>
</section>
<!-- ==============================================
**Portfolio**
=================================================== -->
<section class="portfolio-outer padding-lg">

    <!-- Start portfolio filter -->
    <div class="container text-center main-album-container">

        <!-- end portfolio filter -->

        <ul class="row portfolio clearfix album-wrapper">
            @foreach (var item in Model)
            {

                <li class="col-6 col-md-3">

                    <a href="javascript:void(null)" onclick="GetImages('@item.AlbumName')">
                        <div class="inner" style='background-image: url(@item.AlbumImages.ThumbImage)'>
                            <div class="overlay">
                                <p>images(1)</p>

                            </div>

                            <figure><img src="@item.AlbumImages.ThumbImage" class="img-responsive" alt=""></figure>
                        </div>
                    </a>
                    <div class="album-view"></div>
                    <h1 class="album-name"><a href="javascript:void(null)" onclick="GetImages('@item.AlbumName')">@item.AlbumName </a></h1>
                </li>
            }
       </ul>

    </div>

    <div class="container image-album-container"></div>  
    <div id="reach"></div>
    <div class="service-loader" style="display:none">
        <img src="~/Content/images/new-Images/doublering.gif" />
    </div>
</section>
<!-- ==============================================
**Portfolio**
==============

===================================

這是我的js：

var albumName = "";
    var items = [];
    var page = 0,
    var url = '/home/GetImages';
    inCallback = false,
    isReachedScrollEnd = false;
    var thisWindow = $(window);
    var scrollHandler = function () {
        if ($(window).scrolltop() == $(document).height() -  $(window).height()) { 
         loadprojectdata(url); 
         } 
    }

    function loadProjectData(loadMoreRowsUrl) {

        if (page > -1 && !inCallback) {
            inCallback = true;
            page++;
            $(".service-loader").show();

            $.ajax({
                type: 'GET',
                url: loadMoreRowsUrl,
                data: { pageNum: page, Album: albumName },
                success: function (data, textstatus) {
                    var _html = "";
                    if (data != '') {
                        $.each(data, function (key, val) {
                            _html += '<div class="child-service-container">';
                            _html += '<div class="child-service-head">';
                            _html += '<a class="thumbnail fancybox" rel="ligthbox" href="' + val.FullImage + '">';
                            _html += '<img src="' + val.ThumbImage + '" alt="' + val.ThumbImage + '" height="250" width="250" />';
                            _html += '</a></div></div>';
                        });
                        items.push(_html);
                        $('.image-album-container .row').append(items);
                        items = [];


                    }
                    else {
                        page = -1;
                    }

                    inCallback = false;

                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(errorThrown);
                }
            });
        }

    }

    function GetImages(album) {
        $(window).scroll(scrollHandler);
        albumName = album;

        var request = $.ajax({
            url: "/Home/GetImages",
            type: 'GET',
            async: false,
            data: { pageNum: 0, Album: albumName }
        });
        request.done(function (response) {
            $('.main-album-container').hide();

            var _html = '<div class="service-wrapper"><div class="row">';
            $.each(response, function (key, val) {
                _html += '<div class="child-service-container">';
                _html += '<div class="child-service-head">';
                _html += '<a class="thumbnail fancybox" rel="ligthbox" href="' + val.FullImage + '">';
                _html += '<img src="' + val.ThumbImage + '" alt="' + val.ThumbImage + '" height="250" width="250" />';
                _html += '</a></div></div>';
            });
            _html += ' </div></div>';
            items.push(_html);
            $('.image-album-container').html(items)
            items = [];

        });
        request.fail(function (jqXHR, textStatus) {
            alert("Request failed: " + textStatus);
        });

    }

我希望圖像在滾動時緩慢地上傳到那里，這是前視圖

Answer 1

一切都在以下代碼行中發生

if ($(window).scrolltop() == $(document).height() -  $(window).height()) { 
   loadprojectdata(url); 
}

在此，僅在您根據此公式滾動到頁面底部后才開始加載。 更改它以觸發loadprojectdata(url); 您要加載的方法。