بارگذاری صفحه با حرکت موس

با سلام و خدا قوت خدمت اساتید گرامی
در بعضی از سایتها دیدم که با حرکت موس به پایین صفحه سایت افکت هایی میده یا بارگذاری میشه
مثال خوبش سایت دیوار هست که موقع بارگذاری اولیه مثلا 100 آگهی لود میشه ولی وقتی با موس صفحه رو پایین می کشی مجددا 100 تا دیگه بارگذاری میکنه و همینطور الی آخر

این پروسه چطور اتفاق می افته
یا لااقل برای تحقیق در گوگل چی رو باید سرچ بکنم

با تشکر

سلام
جستجو کنید : scroll Lazy
بیشتر

scroll load سرچ کنید
روش کار برخی سایتا به این صورته که با رسیدن اسکرول یا زدن دکمه درخواست ajax به سرور ارسال میشه و صفحه بعدی از رکورد های دیتا بیس رو دریافت میکنه و نشون میده

نقل قول:

---

scroll load سرچ کنید
روش کار برخی سایتا به این صورته که با رسیدن اسکرول یا زدن دکمه درخواست ajax به سرور ارسال میشه و صفحه بعدی از رکورد های دیتا بیس رو دریافت میکنه و نشون میده

---

باتشکر یه چیزایی پیدا کردم ولی من می خوام یه چیزی مثل سایت دیوار رو درست کنم یعنی اطلاعات رو از دیتابیس بخونه و دقیقا توی این مرحله یعنی خوندن از دیتابیس مشکل دارم
لطفا اگه منیع یا سورس مناسبی سراغ دارید معرفی بفرمائید

html

کد HTML:

---

<table>
<tr><td>
    <div id="dvCustomers">
        <asp:Repeater ID="rptCustomers" runat="server">
            <ItemTemplate>
                <table cellpadding="2" cellspacing="0" border="1" style="width: 200px; height: 100px;
                border: dashed 2px #04AFEF; background-color: #B0E2F5">
                <tr>
                    <td>
                        <b><u><span class="name">
                            <%# Eval("ContactName") %></span></u></b>
                    </td>
                </tr>
                <tr>
                    <td>
                        <b>City: </b><span class="city"><%# Eval("City") %></span><br />
                        <b>Postal Code: </b><span class="postal"><%# Eval("PostalCode") %></span><br />
                        <b>Country: </b><span class="country"><%# Eval("Country")%></span><br />
                        <b>Phone: </b><span class="phone"><%# Eval("Phone")%></span><br />
                        <b>Fax: </b><span class="fax"><%# Eval("Fax")%></span><br />
                    </td>
                </tr>
            </table>
            <br />
            </ItemTemplate>
        </asp:Repeater>
    </div>
</td>
<td valign="bottom">
    <img id="loader" alt="" src="loading.gif" style="display: none" />
</td>
</tr>
</table>

---

sql

USE [Northwind]

GO

SET ANSI_NULLS ON

GO

SET QUOTED_IDENTIFIER ON

GO

CREATE PROCEDURE [dbo].[GetCustomersPageWise]

      @PageIndex INT = 1

      ,@PageSize INT = 10

      ,@PageCount INT OUTPUT

AS

BEGIN

      SET NOCOUNT ON;

      SELECT ROW_NUMBER() OVER

            (

                  ORDER BY [CustomerID] ASC

            )AS RowNumber

      ,[CustomerID]

      ,[CompanyName]

      ,[ContactName]

      ,[City]

      ,[Country]

      ,[PostalCode]

      ,[Phone]

      ,[Fax]

    INTO #Results

      FROM [Customers]

     

      DECLARE @RecordCount INT

      SELECT @RecordCount = COUNT(*) FROM #Results

 

      SET @PageCount = CEILING(CAST(@RecordCount AS DECIMAL(10, 2)) / CAST(@PageSize AS DECIMAL(10, 2)))

      PRINT       @PageCount

           

      SELECT * FROM #Results

      WHERE RowNumber BETWEEN(@PageIndex -1) * @PageSize + 1 AND(((@PageIndex -1) * @PageSize + 1) + @PageSize) - 1

     

      DROP TABLE #Results

END

C#‎

protected void Page_Load(object sender, EventArgs e)

{

    if (!IsPostBack)

    {

        rptCustomers.DataSource = GetCustomersData(1);

        rptCustomers.DataBind();

    }

}

 

public static DataSet GetCustomersData(int pageIndex)

{

    string query = "[GetCustomersPageWise]";

   SqlCommand cmd = new SqlCommand(query);

    cmd.CommandType = CommandType.StoredProcedure;

    cmd.Parameters.AddWithValue("@PageIndex", pageIndex);

    cmd.Parameters.AddWithValue("@PageSize", 10);

    cmd.Parameters.Add("@PageCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output;

    return GetData(cmd);

}

 

private static DataSet GetData(SqlCommand cmd)

{

    string strConnString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;

    using (SqlConnection con = new SqlConnection(strConnString))

    {

        using (SqlDataAdapter sda = new SqlDataAdapter())

        {

            cmd.Connection = con;

            sda.SelectCommand = cmd;

            using (DataSet ds = new DataSet())

            {

                sda.Fill(ds, "Customers");

                DataTable dt = new DataTable("PageCount");

                dt.Columns.Add("PageCount");

                dt.Rows.Add();

                dt.Rows[0][0] = cmd.Parameters["@PageCount"].Value;

                ds.Tables.Add(dt);

                return ds;

            }

        }

    }

}

و این وب متد

[WebMethod]

public static string GetCustomers(int pageIndex)

{

    return GetCustomersData(pageIndex).GetXml();

}

javascript

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">

    var pageIndex = 1;

    var pageCount;

    $(window).scroll(function () {

        if ($(window).scrollTop() == $(document).height() - $(window).height()) {

            GetRecords();

        }

    });

    function GetRecords() {

        pageIndex++;

        if (pageIndex == 2 || pageIndex <= pageCount) {

            $("#loader").show();

            $.ajax({

                type: "POST",

                url: "Default.aspx/GetCustomers",

                data: '{pageIndex: ' + pageIndex + '}',

                contentType: "application/json; charset=utf-8",

                dataType: "json",

                success: OnSuccess,

                failure: function (response) {

                    alert(response.d);

                },

                error: function (response) {

                    alert(response.d);

                }

            });

        }

    }

    function OnSuccess(response) {

        var xmlDoc = $.parseXML(response.d);

        var xml = $(xmlDoc);

        pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCou  nt").text());

        var customers = xml.find("Customers");

        customers.each(function () {

            var customer = $(this);

            var table = $("#dvCustomers table").eq(0).clone(true);

            $(".name", table).html(customer.find("ContactName").text());

            $(".city", table).html(customer.find("City").text());

            $(".postal", table).html(customer.find("PostalCode").text());

            $(".country", table).html(customer.find("Country").text());

            $(".phone", table).html(customer.find("Phone").text());

            $(".fax", table).html(customer.find("Fax").text());

            $("#dvCustomers").append(table).append("<br />");

        });

        $("#loader").hide();

    }

</script>

مهمترین بخش ارسال درخواست jquery ajax و انتخاب داده ها از sql بر اساس شماره صفحه و تعداد رکورد هست

با سلام و عرض ادب
این قسمت از جی کویری توی آخرین نسخه کروم در موبایل فقط یکبار اجرا میشه
یعنی هربار که به انتهای صفحه می رسیم باید اجرا بشه
ولی دفعات بعدی رو اجرا نمی کنه
به نظرتون راه حل چیه

چون توی مرورگرهای دیگه درست کار میکنه

 $(window).scroll(function () {

        if ($(window).scrollTop() == $(document).height() - $(window).height()) {

            GetRecords();

        }

    });

در مورد این کد جاوا که با اسکرول فرمان بارگذاری اطلاعات رو میده تنها مشکلی که هست اینه که وقتی کاربر به انتهای صفحه میرسه باید منتظر بشه تا اطلاعات بارگذاری بشه و پرشی هم در صفحه بوجود نمیاد ولی اکر در این فاصله برگرده به بالای صفحه یعنی اسکرول به بالا انجام بده وقتی اطلاعات جدید از سمت سرور میرسه یک پرش در صفحه اتفاق میافته در حالی که من در سایتهایی مث دیوار یا اینستا دیدم که این مشکل وجود نداره
برای نمونه این صفحه سایت من هست میتونید ملاحظه بفرمایبد
http://bolangoo.ir/%D9%87%D9%85%D9%8...D8%A7%D8%AA/1/

لطفا در این مورد راهنمایی بفرمایید