wait لطفا صبر کنید
صفحه اصلی  » مقالات
1393/11/12
7642
10

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

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

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

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

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

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

<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" height="480">

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

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

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

<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">
<noscript><img src="img/example.jpg" width="640" heigh="480"></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">

<Columns>

    <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>

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

C#

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">

    <ContentTemplate>

        <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">

            <Columns>

                <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 (همان تابع قبل) براي بارگذاري كردن گريد فراخواني مي شود. همچنين يك تصوير سبك، تا زماني كه محتواي گريد آماده شود در صفحه بارگذاري مي شود. پس از بار شدن گريد، تايمر و تصوير غير فعال و مخفي مي شوند.

C#

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 

تماس با ما

ایمـیل : I N F O @ D E P N A . C O M
 دفتر تهران : خیابان کارگر شمالی - بعد از مسجد النبی - خیابان ابراهیمی (17) - پلاک 140
تلفن:88019001-021
 دفتر قم : خیابان 45 متری صدوقی - 20 متری فجر - خیابان دانش - کوی 14 - پلاک 10
تلفن:32906868-025