實現圖片按需載入的方法，當要顯示內容的高度超過了頁面的高度，按需載入，根據滾動條的位置來判斷頁面顯示的內容

這個類似於京東或淘寶頁面，根絕頁面的滾動，顯示下面的內容

如下圖所示，一開始並不是所有的圖片都顯示，當滾動條移動到頁面最下面的時候，再顯示下面的內容

解決思路：通過判斷滾動條是否滾動到了頁面的最下面，如果滾動到了頁面的最下面，則重新載入圖片

知識點：1.offset() 方法返回或設定匹配元素相對於文件的偏移（位置）

返回第一個匹配元素的偏移座標。

該方法返回的物件包含兩個整型屬性：top 和 left，以畫素計。此方法只對可見元素有效。

2.scrollTop()：方法返回或設定匹配元素的滾動條的垂直位置。返回滾動條的垂直位置

innerHeight(): 返回滾動條的高度，當移動滾動條的位置，innerHeight()的值不變

scrollHeight: 其實不是“滾動條的高度"，而是表示滾動條需要滾動的高度，即內部div的高度

參考連結：https://blog.csdn.net/wu_dada/article/details/78094991

實現方法是判斷是否到了頁面的最底部：

$('#thumbnailcontainer, .scroll-table-wrap').on('scroll', function () {
          if (loadedImages >= maximumLoadedImages) {
            
 
if ($(this)[0].scrollHeight - $(this).innerHeight() - $(this).scrollTop() < 5) {
              _messagebox.newNotify2(GlobalStringsForAssets.MAXIMUM_LOADED_ASSETS, "", -1);
            }
            return;
          }

          if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight - 60) {
            
 
if (inDelay) { return; }
            CallGetImages($(this), false);
          }
        })

function CallGetImages($ctl, delayed) {
        if (delayed) {
          if ($ctl.scrollTop() + $ctl.innerHeight() >= $ctl[0].scrollHeight - 60) {
            GetImages();
          }

          inDelay = false;
          return;
        }

        inDelay = true;
        setTimeout(function () {
          CallGetImages($ctl, true);
        }, 100);
      }

function GetImages() {
        var timer = null;
        if (getImagesXhr != null) {
          getImageQueued = true;
          return;
        }

        var columnQueryData = CollectQueryData();
        var sortdata;
        if (modelPageType === 'brand') {
          sortdata = $('#brandSortFilter > button').attr('sortcolumn') + ',' + $('#brandsortdirection').attr('sortdirection');
        }
        else {
          sortdata = $('#sortFilter > button').attr('sortcolumn') + ',' + $('#sortdirection').attr('sortdirection');
        }

        var searchTerm = '';
        if (modelPageType == 'brand')
          searchTerm = $('#brandsearchbox').val().trim();
        else
          searchTerm = $('#searchbox').val().trim();
        var searchTags = null;
        if (modelPageType !== 'brand')
          searchTags = $('#additionalTags').autocomplete("getTags");
        var currentSearch = JSON.stringify({ Columns: columnQueryData, SearchTerm: searchTerm, Tags: searchTags, Sorting: sortdata, PageType: pageType });
        if (lastSearch == currentSearch && getImagesXhr !== null) {
          // Already running a query. Wait until it finishes.
          return;
        }

        var newSearch = false;
        if (lastSearch != currentSearch) {
          ClearSearch();

          newSearch = true;
          lastSearch = currentSearch;

          if (getImagesXhr !== null) {
            getImagesXhr.abort();
            getImagesXhr = null;
            if (modelPageType == 'brand' && getCollectionsXhr !== null) {
              getCollectionsXhr.abort();
              getCollectionsXhr = null;
            }
          }

          lastClickedAssetId = '';
          selectedCnt = 0;
        }

        if (newSearch || cachedAssets == null) {

          clearTimeout(timer);
          $('.centered').show();
          imagesQueryData = { Skip: loadedImages, Batch: 50, Columns: columnQueryData, SearchTerm: searchTerm, Tags: searchTags, Sorting: sortdata, PageType: pageType };
          getImagesXhr = $.ajax({
            url: '/Assets/GetImages',
            type: 'POST',
            dataType: 'json',
            data: JSON.stringify(imagesQueryData),
            contentType: 'application/json; charset=utf-8',
            success: function (result) {
              if (result.success) {
                imageData = result.data;
                ShowAssets(imageData);
                showMainSearchList(imageData, searchTerm,"#mainSearchBoxList");
              } else {
                console.log("error");
              }
              getImagesXhr = null;
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
              getImagesXhr = null;
            },
            async: true,
            processData: true,
            complete: function () {
              timer=setTimeout("$('.centered').hide()", 400);
              getImagesXhr = null;
              if (getImageQueued) {
                getImageQueued = false;
                GetImages();
              }

              if (newSearch || parseInt($('.numberOfSearch').text()) < loadedImages) {
                GetAssetCount(JSON.stringify({ Columns: columnQueryData, SearchTerm: searchTerm, Tags: searchTags, Sorting: sortdata, PageType: pageType }));
              }

              CacheAssets(columnQueryData, searchTerm, searchTags, sortdata, pageType);
            }
          });
        } else {
          imageData = cachedAssets;
          cachedAssets = null;
          ShowAssets(imageData);

          if (parseInt($('.numberOfSearch').text()) < loadedImages) {
            GetAssetCount(JSON.stringify({ Columns: columnQueryData, SearchTerm: searchTerm, Tags: searchTags, Sorting: sortdata, PageType: pageType }));
          }

          CacheAssets(columnQueryData, searchTerm, searchTags, sortdata, pageType);
        }
      }

完整的程式碼為：