بارگیری مطالب زیاد ، به یکباره به سرور فشار زیادی وارد می کند ، مخصوصا اگر سرعت اینترنت کم باشد و بارگذاری صفحه طول میکشد . <br />در اینجا قصد دارم روش دوم را با یک پلاگین Jquery آموزش بدهم ، که با اسکرل صفحه تعداد مشخصی از مطالب را از یک صفحه لود می کنند .

سلام دوستان

امروز میخوام یادتون بدم چطور با اسکرول صفحه به سمت پایین مطالب رو لود کنید

در مرحله اول باید یک بانک اطلاعاتی و جدول مربوطه را ایجاد کنید

ابتدا یک DataBase با نام ImagesDB ایجاد کنید

سپس جدول زیر را بسازید

اگر حوصله ساختن جدول را نداشتید بانک را ایجاد کنید و اسکریپت زیر را روی آن اجرا کنید

CREATE TABLE [dbo].[Images]( [Id] [int] IDENTITY(1,1) NOT NULL, [Name] [nvarchar](150) NOT NULL, [Url] [nvarchar](400) NOT NULL, CONSTRAINT [PK_Images] PRIMARY KEY CLUSTERED ( [Id] ASC )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY] ) ON [PRIMARY] GO SET IDENTITY_INSERT [dbo].[Images] ON INSERT [dbo].[Images] ([Id], [Name], [Url]) VALUES (104, N'تصویر', N'http://stemcells.dev.biologists.org/sites/default/files/SI_Cover_small.jpg') INSERT [dbo].[Images] ([Id], [Name], [Url]) VALUES (105, N'تصویر 2', N'http://www.google.com/url?sa=i&source=images&cd=&cad=rja&docid=tiDnQe3hAQK8gM&tbnid=8X7O0CXk7fT2vM:&ved=0CAgQjRw48AE&url=http%3A%2F%2Fwww.edn.com%2Fdesign%2Fled%2F4369072%2FWhat-s-inside-the-Samsung-40W-replacement-LED-light-&ei=8pjTUqOKCojrrQfp4oHgDQ&psig=AFQjCNGtxyB-no9dVR98684ciEXQ3-DFew&ust=1389685362262904') INSERT [dbo].[Images] ([Id], [Name], [Url]) VALUES (106, N'تابلو', N'http://t3.gstatic.com/images?q=tbn:ANd9GcQD4wuPqK_-T0VATn3X9JtXrDM4yE6djE3cEjV-vJSwwaKjR6xZVA') INSERT [dbo].[Images] ([Id], [Name], [Url]) VALUES (107, N'گاو', N'http://www.causingeffect.com/images/made/images/example/cow-sign_200_200.gif') INSERT [dbo].[Images] ([Id], [Name], [Url]) VALUES (108, N'مجسمه', N'http://t0.gstatic.com/images?q=tbn:ANd9GcSUjRPThb3bZwh1DtGobws6wZMvge5jHOUsnzb-1DRRf0RrttZF') INSERT [dbo].[Images] ([Id], [Name], [Url]) VALUES (109, N'فندق', N'http://cdn.appstorm.net/mac.appstorm.net/mac/files/2013/07/PostLogo.png') INSERT [dbo].[Images] ([Id], [Name], [Url]) VALUES (110, N'بسکتبال', N'http://t1.gstatic.com/images?q=tbn:ANd9GcQ2Xm-blDw9Iv6VjupeyPnsMJ3vIHjfpVZ916XMgeW_G48oCIwl-g') INSERT [dbo].[Images] ([Id], [Name], [Url]) VALUES (111, N'منظره', N'http://www.architectureweek.com/2011/0119/images/14901_image_2.150.jpg') INSERT [dbo].[Images] ([Id], [Name], [Url]) VALUES (112, N'عکس', N'http://t2.gstatic.com/images?q=tbn:ANd9GcRtb5d7v81yCfTSODQQr8clSsi2PZB2YWTmAxg0fA9XcDYXvCEG') INSERT [dbo].[Images] ([Id], [Name], [Url]) VALUES (113, N'گوشی', N'http://cdn.conversations.nokia.com/wp-content/uploads/2014/01/Nokia-Asha-image-hider-sq.jpg') INSERT [dbo].[Images] ([Id], [Name], [Url]) VALUES (114, N'گاو', N'http://www.causingeffect.com/images/made/images/example/cow_200_200_c1.jpg') INSERT [dbo].[Images] ([Id], [Name], [Url]) VALUES (115, N'دوربین', N'http://icdn3.digitaltrends.com/image/sony-handycam-hdr-pj480v-press-image-200x200-c.jpg') INSERT [dbo].[Images] ([Id], [Name], [Url]) VALUES (116, N'هلیکوپتر', N'https://modsimconnected.com/image/702101604-638-1175-200x200/image%25203') INSERT [dbo].[Images] ([Id], [Name], [Url]) VALUES (117, N'باند', N'http://icdn3.digitaltrends.com/image/paradigm-millenia-ct-press-image-200x200-c.jpg') INSERT [dbo].[Images] ([Id], [Name], [Url]) VALUES (118, N'عکس', N'http://www.wired.com/reviews/wp-content/uploads/2011/06/liquid_image-200x200.jpg') INSERT [dbo].[Images] ([Id], [Name], [Url]) VALUES (119, N'هواپیما', N'https://modsimconnected.com/image/702101604-638-1172-200x200/image%25206') INSERT [dbo].[Images] ([Id], [Name], [Url]) VALUES (120, N'گل', N'http://www.processing.org/tutorials/pixels/imgs/tint1.jpg') INSERT [dbo].[Images] ([Id], [Name], [Url]) VALUES (121, N'گوشی موبایل', N'http://i-cdn.phonearena.com/images/article/50544-image/Nokia-Lumia-1020-on-AT-T-now-getting-the-Nokia-Black-update-with-RAW-image-support.jpg') INSERT [dbo].[Images] ([Id], [Name], [Url]) VALUES (122, N'نقاشی', N'http://t3.gstatic.com/images?q=tbn:ANd9GcTpwzLaqsGNXnD8upLb1ExsQOW3ixLT_wC_ESdF15QMENRAPah0tQ') INSERT [dbo].[Images] ([Id], [Name], [Url]) VALUES (123, N'شیطونک', N'http://images.all-free-download.com/images/graphicmedium/the_madagascar_cartoon_image_png_176442.jpg') INSERT [dbo].[Images] ([Id], [Name], [Url]) VALUES (124, N'گودزیلا', N'http://images.all-free-download.com/images/graphicmedium/cartoon_pterodactyl_image_04_vector_180927.jpg') INSERT [dbo].[Images] ([Id], [Name], [Url]) VALUES (125, N'کفش', N'http://www.google.com/url?sa=i&source=images&cd=&cad=rja&docid=8BpLoxdwmyk24M&tbnid=tJwDw-MiGoVP-M:&ved=0CAgQjRw4cA&url=http%3A%2F%2Fvectorportal.deviantart.com%2Fart%2FFish-vector-image-410227601&ei=5JfTUvTRFYbArAfYzYDwBg&psig=AFQjCNGcUMDvnko7gu2YvMhEFj5djX6BLw&ust=1389685092467943') INSERT [dbo].[Images] ([Id], [Name], [Url]) VALUES (126, N'گاو', N'http://www.causingeffect.com/images/made/images/example/cow-sign_200_200gray.jpg') INSERT [dbo].[Images] ([Id], [Name], [Url]) VALUES (127, N'میمون', N'http://docs.opencv.org/_images/Morphology_2_Tutorial_Original_Image.jpg') INSERT [dbo].[Images] ([Id], [Name], [Url]) VALUES (129, N'پلنگ', N'http://www.google.com/url?sa=i&source=images&cd=&cad=rja&docid=8drCpiv9QfVYdM&tbnid=u5s0ur6Kxir2gM:&ved=0CAgQjRw40AE&url=http%3A%2F%2Fyushman.deviantart.com%2Fart%2FImage-423417620&ei=85fTUo_jEoiOrQedlIDwDA&psig=AFQjCNEv4L74yJZdFPTurAeD6gI_0M2Hdg&ust=1389685107400020') INSERT [dbo].[Images] ([Id], [Name], [Url]) VALUES (130, N'آتش', N'http://cdn.appstorm.net/mac.appstorm.net/mac/files/2013/10/Ember.png') SET IDENTITY_INSERT [dbo].[Images] OFF /****** Object: StoredProcedure [dbo].[GetImagesPageWise] Script Date: 01/13/2014 11:25:21 ******/ SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO CREATE PROCEDURE [dbo].[GetImagesPageWise] --[dbo].[GetImagesPageWise] 2, 10, null @PageIndex INT = 1 ,@PageSize INT = 3 ,@PageCount INT OUTPUT AS BEGIN SET NOCOUNT ON; SELECT ROW_NUMBER() OVER ( ORDER BY [Id] ASC )AS RowNumber ,Id ,Name ,Url INTO #Results FROM [Images] 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 GO

سپس یک دیتا لیست ایجاد میکنیم

<asp:DataList ID="dlImages" runat="server" RepeatLayout="Table" RepeatColumns="3" CellPadding="2" CellSpacing="20"> <ItemTemplate> <table class="item" cellpadding="0" cellspacing="0" border="0"> <tr> <td align="center" class="header"> <span class="name"> <%# Eval("Name") %></span> </td> </tr> <tr> <td align="center" class="body"> <img class="image" src='<%# Eval("Url") %>' alt="" /> </td> </tr> <tr> <td align="center"> <a href="http://barnamenevisan.org/" mce_href="../">برنامه نویسان</a> </td> </tr> <tr> <td class="footer" align="center"> <a href='<%# Eval("Url") %>' target="_blank" class="button">نمایش</a> <input type="hidden" class="is_used" value="0" /> </td> </tr> </table> </ItemTemplate> </asp:DataList>

برای صفحه بندی یا همون اسکرول صفحه به سمت پایین در بانک Stored procedure ایجاد کریم

CREATE PROCEDURE [dbo].[GetImagesPageWise] @PageIndex INT = 1 ,@PageSize INT = 3 ,@PageCount INT OUTPUT AS BEGIN SET NOCOUNT ON; SELECT ROW_NUMBER() OVER ( ORDER BY [Id] ASC )AS RowNumber ,Id ,Name ,Url INTO #Results FROM [Images] 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

در کد در Load متدی را صدا کردیم که بر اساس تعداد ستون Repeat کنترل DataList از بانک به آن رکورد اضافه میکنه

private void BindDummyItem() { DataTable dummy = new DataTable(); dummy.Columns.Add("Id"); dummy.Columns.Add("Name"); dummy.Columns.Add("Url"); int count = dlImages.RepeatColumns == 0 ? 1 : dlImages.RepeatColumns; for (int i = 0; i < count; i++) { dummy.Rows.Add(); } dlImages.DataSource = dummy; dlImages.DataBind(); }

در مرحله بعد متد های اجرایی را اصفه میکنیم

متد زیر از طریق Ajax مقدار را دریافت کرده و به آن تعداد رکورد را برمیگرداند

[WebMethod] public static string GetImages(int pageIndex) { return GetImagesData(pageIndex).GetXml(); } public static DataSet GetImagesData(int pageIndex) { int pageSize = 9; string query = "[GetImagesPageWise]"; SqlCommand cmd = new SqlCommand(query); cmd.CommandType = CommandType.StoredProcedure; cmd.Parameters.AddWithValue("@PageIndex", pageIndex); cmd.Parameters.AddWithValue("@PageSize", pageSize); 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, "Images"); 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; } } } }

خب در پایان توسط Ajax باید متد ها رو فراخوانی کنید

<mce:script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" mce_src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></mce:script> <mce:script type="text/javascript"><!-- var pageIndex = 0; var pageCount; $(window).scroll(function () { if ($(window).scrollTop() == $(document).height() - $(window).height()) { GetRecords(); } }); $(function () { GetRecords(); }); function GetRecords() { pageIndex++; if (pageIndex == 1 || pageIndex <= pageCount) { $("#loader").show(); $.ajax({ type: "POST", url: "CS.aspx/GetImages", data: '{pageIndex: ' + pageIndex + '}', contentType: "application/json; charset=utf-8", dataType: "json", success: OnSuccess, failure: function (response) { alert(response.responseText); }, error: function (response) { alert(response.responseText); } }); } } function OnSuccess(response) { var xmlDoc = $.parseXML(response.d); var xml = $(xmlDoc); pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text()); var images = xml.find("Images"); var repeatColumns = parseInt("<%=dlImages.RepeatColumns == 0 ? 1 : dlImages.RepeatColumns %>"); var rowCount = Math.ceil(images.length / repeatColumns); var j = 0; images.each(function () { var image = $(this); var row = $("[id*=dlImages] .item:last").closest("tr"); if ($(".is_used[value='1']", row).length == repeatColumns) { row = $("[id*=dlImages] tr").eq(0).clone(); $(".is_used", row).val("0"); $(".image", row).attr("src", ""); $(".button", row).attr("href", ""); $(".loader", row).remove(); $("[id*=dlImages]").append(row); j = 0; } else { row = $("[id*=dlImages] .item:last").closest("tr"); } var cell = $(".item", row).eq(j); $(".name", cell).html(image.find("Name").text()); $(".button", cell).attr("href", image.find("Url").text()); $(".is_used", cell).attr("value", "1"); var img = $(".image", cell); var loader = $("<img class = 'loader' src = 'loader.gif' />"); img.after(loader); img.hide(); img.attr("src", image.find("Url").text()); img.load(function () { $(this).parent().find(".loader").remove(); $(this).fadeIn(); }); j++; }); $("[id*=dlImages] .is_used[value='0']").closest(".item").remove(); } // --></mce:script>

کدهای بالا با استفاده از موقعیت اسکرول صفحه مقادیر را لود میکند

در این نمونه ما تصاویر را براساس Url آنها لود میکنیم

موقع اجرا خواهید دید که تا زمان لود شدن تصویر یک تصویر متحرک نمایش داده میشود

نمونه ضمیمه کردم

موفق و پیروز باشید