منوی اصلی

بارگذاری با تاخیر (lazy loading)

10274 بازدید

15 مرداد 1399 12:57:00

هدف لود با تاخیر افزایش سرعت لود صفحات و کاهش مصرف حافظه می باشند. بدین ترتیب لود با تاخیر ارتباط مستقیم با کارایی برنامه خواهد داشت. در این الگو گفته میشود که داده ها تنها در زمان استفاده بارگذاری شوند. به عبارتی اگر هنوز زمان نمایش داده ها، تصاویر و کنترلها نرسیده است، بارگذاری نشوند.

باگذاری با تاخیر تصاویر:

یک مورد پرکاربرد از این الگو، صفحات وبی هستند که شامل تعداد زیادی تصویر می باشند. در این صفحات تصاویر به طور همزمان در صفحه لود نمی شوند بلکه تنها وقتی صفحه اسکرول می شود و نیاز به نمایش تصویر می باشد، لود می شوند.

یکی نمونه سایت با بارگذاری با تاخیر تصاویر را در سایت مجله نور می توان دید.

برای پیاده سازی این مورد از پلاگین lazyload و در کدهای JQUERY استفاده می گردد.برای استفاده از این پلاگین، باید سورس را به صفحات مورد نظر خود اضافه کرد:

تصویر پیش زمینه را (یک تصویر خاکستری سبک) در ویژگی src از تگ تصویر و تصویر اصلی را در ویژگی data-original قرار دهید. همچنین یک کلاس مشترک lazy برای استایل این تصاویر تعریف کنید.

با کد زیر تمام تصاویر کلاس lazy با تاخیر بار می شوند:

$("img.lazy").lazyload();

برای مرورگرهایی که جاوااسکریپت را غیرفعال کرده اند می توانید از تگ noscript برای نشان دادن تصاویر استفاده کنید:

برای جلوگیری از نمایش همزمان تصویر پیش زمینه و تصویر واقعی، تصویر پیش زمینه را مخفی کنید:

.lazy {

display: none;

}

به صورت پیش فرض تصاویر مورد نظر وقتی بار می شوند که در صفحه ظاهر می شوند (اسکرول به آنها می رسد). اگر می خواهید زودتر از موقع بار شوند می توانید از پارامتر threshold استفاده کنید. مطابق با کد زیر عدد 200 باعث می شود که تصویر به اندازه 200 پیکسل پیش از ظاهر شدن، بارگذاری شود.

$("img.lazy").lazyload({ threshold : 200 });

رویداد پیش فرض برای بارگذاری تصویر، رسیدن اسکرول به تصویر مورد نظر می باشد. ولی در بعضی کاربردها بهتر است از رویداد دیگری مثل click استفاده کرد:

$("img.lazy").lazyload({

event : "click"

});

بارگذاری با تاخیر در گرید ویو:

یک مثال مناسب برای استفاده از lazy load صفحات سنگین گزارشات می باشد. برای مشاهده این صفحات، ابتدا باید صبر کرد تا پس از گرفتن داده ها از بانک، تمام کنترل ها همزمان در صفحه بارگذاری و -به کاربر نمایش داده شوند. تمام اینها زمان بر بوده و کاربر باید شکیبا باشد. در حالیکه می توان ابتدا دیگر کنترلهای صفحه و سپس گرید گزارشات را با تاخیری کوتاه به کاربر نمایش داد.

فرض کنید صفحه aspx زیر با یک گرید ویو را داریم:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" Font-Names="Arial"

Font-Size="11pt" AlternatingRowStyle-BackColor="#C2D69B" HeaderStyle-BackColor="green">

<asp:BoundField ItemStyle-Width="200px" DataField="CustomerID" HeaderText="CustomerID" />

<asp:BoundField ItemStyle-Width="100px" DataField="City" HeaderText="City" />

<asp:BoundField ItemStyle-Width="50px" DataField="Country" HeaderText="Country" />

</Columns>

</asp:GridView>

همچنین متد زیر یک کوئری ساده به جدول مشتریان و باند کردن نتیجه به گرید ویو می باشد:

private void BindCustomers()

{

String strConnString = ConfigurationManager.ConnectionStrings["conString"].ConnectionString;

SqlConnection con = new SqlConnection(strConnString);

SqlCommand cmd = new SqlCommand();

SqlDataAdapter sda = new SqlDataAdapter();

DataSet ds = new DataSet();

cmd.CommandType = CommandType.Text;

cmd.CommandText = "select Top 10 CustomerID,City,Country from customers";

cmd.Connection = con;

sda.SelectCommand = cmd;

try

{

con.Open();

sda.Fill(ds);

GridView1.EmptyDataText = "No Records Found";

GridView1.DataSource = ds;

GridView1.DataBind();

}

catch (Exception ex)

{

throw ex;

}

finally

{

con.Close();

con.Dispose();

}

برای پیاده سازی لود با تاخیر از کدهای AJAX بهره می بریم. بدین منظور سه کنترل TIMER ، UpdatePanel و scriptmanager را به صفحه aspx خود اضافه می کنیم.

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<div>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<asp:Timer ID="Timer1" runat="server" OnTick="TimerTick" Interval="2000">

</asp:Timer>

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" Font-Names="Arial"

Font-Size="11pt" AlternatingRowStyle-BackColor="#C2D69B" HeaderStyle-BackColor="green">

<asp:BoundField ItemStyle-Width="200px" DataField="CustomerID" HeaderText="CustomerID" />

<asp:BoundField ItemStyle-Width="100px" DataField="City" HeaderText="City" />

<asp:BoundField ItemStyle-Width="50px" DataField="Country" HeaderText="Country" />

</Columns>

</asp:GridView>

<asp:Image ID="imgLoader" runat="server" ImageUrl="~/loading7.gif" />

</ContentTemplate>

</asp:UpdatePanel>

</div>

کنترل تایمر پس از زمان 2000 میلی ثانیه (2 ثانیه) رویداد ontick را صادر کرده و متد timertick برای هندل کردن این رویداد فراخوانی می شود. در این متد تابع bindcustomers (همان تابع قبل) برای بارگذاری کردن گرید فراخوانی می شود. همچنین یک تصویر سبک، تا زمانی که محتوای گرید آماده شود در صفحه بارگذاری می شود. پس از بار شدن گرید، تایمر و تصویر غیر فعال و مخفی می شوند.

protected void TimerTick(object sender, EventArgs e)

{

this.BindCustomers();

Timer1.Enabled = false;

imgLoader.Visible = false;

}

بارگذاری با تاخیر در c#:

مقداردهی با تاخیر نیز در شی های با حجم بالای داده کاربرد دارند. در واقع در این الگو شی ایجاد شده ولی داده های حجیم آن در حافظه بارگذاری نمیشوند مگر وقتی که به آنها نیاز باشد. برای پیاده سازی این الگو می توان فیلدی برای کلاس تعریف کرده و مقدار آن را null قرار داد. هرگاه به بارگذاری داده ها نیاز شد مقدار فیلد بررسی می گردد. اگر برابر null بود داده های مورد نظر بارگذاری می شوند.

همانند کد زیر، هر گاه به لیست سفارشات (orders) مشتری نیاز شد، فیلد _orders با null مقایسه شده و لیست سفارشات (orders) بارگذاری می شود.

public class Customer

{

public int CustomerID { get; set; }

public string Name { get; set; }

private IEnumerable<Order> _orders;

public IEnumerable<Order> Orders

{

get

{

if (_orders == null)

{

_orders = OrdersDatabase.GetOrders(CustomerID);

}

return _orders;

}

// Constructor

public Customer(int id, string name)

{

CustomerID = id;

Name = name;

}

منابع:

http://www.appelsiini.net/projects/lazyload

بارگذاری با تاخیر (lazy loading)

برچسب ها

نظرات کاربران