8 قدم تا بارگذاری با تاخیر تصاویر در ASP.NET

ارسال شده توسط Unknown ۱۳۹۰ بهمن ۱۸, سه‌شنبه برچسب‌ها: ، 0 نظرات
در مورد تکنیک پس بارگذاری تصاویر یا بارگذاری با تاخیر تصاویر توضحیات کاملی را میتوانیداینجا مشاهده بفرمایید. در اینجا قصد داریم تا یک نمونه عملیاتی از این تکنیک را در ASP.NET با هم بررسی کنیم. برای انجام اینکار از پلاگین Lazy Load مربوط به jquery استفاده میکنیم. این پلاگین همراه پروژه نمونه وجود دارد ولی برای دریافت فایل و مشاهده توضیحات بیشتر میتوانید به سایت پلاگین مراجعه کنید.
آماده سازی محیط:
1- یک برنامه ASP.NETایجاد کنید و پوشه هایی با نام های Images و Scripts در آن ایجاد کنید.
2- فایل jquery و پلاگین مربوطه را درون پوشه Scripts قرار دهید.
3- تصاویر پیش فرض را ویندوز را به درون Images کپی کنید.
4- یک پوشه App_Themes به برنامه اضافه کنید و یک Theme به نام Default درون آن ایجاد کنید و تنظیمات زیر را به وب کانفیگ اضافه کنید تا برنامه از این Theme استفاده کند.
<pages styleSheetTheme="Default"></pages>

تا اینجا مراحل اولیه جهت آماده سازی محیط کار را انجام دادیم. از این پس مراحل زیر را طی میکنیم تا امکان بارگذاری با تاخیر تصاویر به وجود آید.
5- یک صفحه ASP.NET ایجاد کنید و ارجاعاتی به فایل های jquery و پلاگین به شکل زیر ایجاد کنید.

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

6- جهت فعال سازی پلاگین برای تصاویری که کلاس lazy  دارند، کد زیر را بعد از ارجاعات خود اضافه کنید. میتوانیم این پلاگین را به همه تصاویر اعمال کنیم. اما برای اینکه دست ما در انتخاب اینکه کدام تصاویر از این تکنیک استفاده کنند باز باشد، تصاویری که میخاهیم این قابلیت را داشته باشند، با کلاس lazy شناسایی میکنیم.
<script type="text/javascript">
    $(function () {
        $("img.lazy").lazyload();
    });
</script>
7- درون صفحه ASP.NET خود یک Repeaterبا مشخصات زیر قرار دهید.

<asp:Repeater ID="RepeaterImages" runat="server">
<HeaderTemplate><div id="albume-container"></HeaderTemplate>
    <ItemTemplate>
 
            <asp:Image CssClass="lazy" ID="Image" runat="server" ImageUrl="~/grey.gif" data-original='<%# Container.DataItem %>'
                Width="1024" Height="768" />
 
    </ItemTemplate>
    <FooterTemplate></div></FooterTemplate>
</asp:Repeater>

نکته ای که در تعریف بالا باید به آن دقت کنید اضافه کرد خاصیت data-original به تصویر است. به صورت پیشفرض بجای تصویر اصلی یک تصویر با انداز 1 در 1 پیکسل بسیار سبک در تصاویر انتخابی نمایش داده میشود و در هنگامی که نیاز به بارگذاری تصویر بود، آدرسی که در data-original قرار دارد دورن تصویر بارگذاری میشود.
8- قطعه کد زیر را برای بارگذاری لیستی از تصاویر و الصاق آن به Repeater درون کد برنامه خود قرار دهید.
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        LoadData();
    }
}
 
private void LoadData()
{
    string[] filesindirectory = Directory.GetFiles(Server.MapPath("~/Images"));
    List<String> images = new List<string>(filesindirectory.Count());
 
    foreach (string item in filesindirectory)
    {
        images.Add(Page.ResolveUrl( String.Format("~/Images/{0}", System.IO.Path.GetFileName(item))));
    }
 
    RepeaterImages.DataSource = images;
    RepeaterImages.DataBind();
 
}
کار تمام است. هم اکنون تصاویر شما تنها در صورتی که نیاز به مشاهده آنها باشد در صفحه دیده میشوند. این پلاگین قابلیت های جالب زیادی دارد مثلا اگر بخواهید کمی زود از رسیدن به تصویر، بارگذاری آن آغاز شود میتوانید از قطعه کد زیر استفاده کنید.
عدد 200 به این معنی است که اگه موقعیت صفحه به 200 پیکسلی تصویر رسید اقدام به بارگذاری تصویر نماید.
$("img.lazy").lazyload({ threshold: 200 });
برای دریافت اطلاعات بیشتر درباره این پلاگین به صفحه این پلاگین در اینجا مراجعه کنید.
برای دریافت برنامه نمونه به اینجا مراجعه کنید.
 به منظور سبک شدن فایل نمونه برنامه، تصاویر پیش فرض را از پوشه تصاویر حذف کردم. قبل از تست برنامه تصاویر دلخواه خود را درون این پوشه قرار دهید.

0 نظرات:

ارسال یک نظر