Question

在我的应用程序中，我使用了转发器控件。因为我一次加载了项目。但是我的客户想要显示前6个项目，如果用户到达页面的末尾，它将显示一个名为加载图像的图像，之后短时间显示另外6个项目并且用户再次到达页面末尾它将在屏幕结束时显示加载图像并加载另外6个项目，依此类推。例如：Facebook loading

Answer 1

听起来你需要使用连续滚动，在用户滚动时加载图像。以下是一些演示如何使用连续滚动的文章：

http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=371

http://www.webresourcesdepot.com/load-content-while-scrolling-with-jquery/

以下是使用连续滚动的图库的示例：

<!DOCTYPE html>
<html>
<head>
  <style type="text/css" >
    div { border: solid 1px black; height:200px; }
  </style>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
    <script type="text/javascript">
        var pixelsBetweenImages = 200;
        var imagesArray = {}
        var imagesArray = new Array(); // regular array (add an optional integer argument to control array's size)
        imagesArray[0] = "";
        imagesArray[1] = "";
        imagesArray[2] = "";
        imagesArray[3] = "/images/ImageThree.gif";
        imagesArray[4] = "/images/ImageFour.gif";
        imagesArray[5] = "/images/ImageFive.gif";
        imagesArray[6] = "/images/ImageSix.gif";
        imagesArray[7] = "/images/ImageSeven.gif";
        imagesArray[8] = "/images/ImageEight.gif";

        $(window).scroll(function() {
            var scrollpos = $(window).scrollTop() + $(window).height();
            var imageIndex = Math.floor(scrollpos / pixelsBetweenImages);
            if (imagesArray[imageIndex] != "") {
                var div = $("#" + imageIndex);
                div.html(imagesArray[imageIndex]);
                imagesArray[imageIndex] = "";
            }

        });
    </script>

    <div>Visible on first load</div>
    <div>Visible on first load</div>
    <div>Visible on first load</div>
    <div id="3">3&nbsp;</div>
    <div id="4">4&nbsp;</div>
    <div id="5">5&nbsp;</div>
    <div id="6">6&nbsp;</div>
    <div id="7">7&nbsp;</div>
    <div id="8">8&nbsp;</div>

</body>
</html>

来源：Is there ability to load page images partially when scroll down to it or is it just effect?

至于显示加载图像，只需使用动画gif作为默认图像，并使用setTimeout或其他内容延迟加载实际图像以实现效果。

ASP.NET Repeater加载图像

1 个答案: