iranexperts

بهینه سازی سایت (1) – lazy loading

شنبه 21 خرداد 1390 11:39 ق.ظ ویرایش: شنبه 21 خرداد 1390 12:05 ب.ظ

توسط: مجتبی

نوع مطلب: jQuery ،

ارسال به

در حال حاضر دغدغه‌ی بسیاری از وبمسترها بالابردن سرعت لود یا پایین آوردن حجم صفحات وبسایت هست که نتیجه‌ی هر دو جلب رضایت کاربر و افزایش میزان بازدید است. حالا فرض کنید که این وبمستر بخت برگشته ساکن ایران باشه و البته اکثر بازدیدکننده‌هایش هم ساکن ایران باشند. در اینصورت بالا بردن سرعت لود وبسایت یک کار اساسی برای بنا کردن یک سایت محسوب می‌شود. تکنیک های زیادی برای افزایش سرعت لود وجود دارد که اکثر آنها به واسطه‌ی کم کردن حجم صفحه و فایل‌های پیوست شده به صفحه این کار را انجام می‌دهند.طی این پست و پست‌های آینده ترفندهایی که برای افزایش سرعت لود صفحه استفاده می‌شوند, ارائه می‌شود. بنابراین همراه ما باشید.

لود غیرهمزمان(کند,تنبل) یا به اصطلاح lazy loading برای تصاویر صفحه:

برای پیاده‌سازی این تکنیک از یک پلاگین که برای جی‌کوئری نوشته شده استفاده می‌کنیم.
روش کار این تکنیک به اینصورت است که هنگام لود صفحه , جاوااسکریپت لینک تمامی عکسها رو از دیدbrowser مخفی می‌کند و فقط هر عکسی که در کادر browser , بدون نیاز به اسکرول کردن صفحه, دیده شود , لود می‌شود. و در زمان اسکرول کردن صفحه , هر عکس لود نشده‌ای که در کادر browser قرار بگیرد , همان لحظه لود می‌شود.
به این ترتیب تمام تصاویر موجود در صفحه به طور همزمان لود نمی‌شوند و در نتیجه سرعت لود صفحه بالا می‌رود و در مواردی حتی سرعت لود چندین برابر می‌شود.
برای مثال می‌توانید به آدرس زیر مراجعه کنید و بعد از لود شدن سایت شروع به اسکرول کردن کنید و به نحوه‌ی لود شدن تصاویر توجه کنید.

http://deanhume.com/Home/BlogPost/set-up-iis-7-to-run-a-secure-site-locally---https/21

برای شروع ابتدا پلاگین jquery.lazyload.js را از اینجا دانلود میکنیم.

حالا هم جی‌کوئری و هم lazyload را به صفحه اضافه می‌کنیم:

در انتها پلاگین lazyload را برای تصاویر صفحه فراخوانی می‌کنیم:

$(function(){

$("img").lazyload();

});

</script>

این عبارت :

$("img").lazyload();

به این معنی است که این پلاگین را بر روی تمام تگهای img اعمال کن.
شاید زمانی که از این تکنیک به شکل بالا استفاده کنید لود شدن تصاویر در هنگام اسکرول کردن را حس نکنید. اما برای لود شدن تصویر افکت های در نظر گرفته شده که با تعیین آنها این احساس که عکس ها در همان لطظه‌ی اسکرول کردن لود می‌شوند , بیشتر احساس می‌شود.
این افکت به صورت زیر تعیین می‌شود:

$("img").lazyload({effect: "fadeIn"});

در اینصورت وقتی که تصویر داخل محدوده‌ی قابل رویت مرورگر قرار بگیرد به آرامی ظاهر می‌شود.

تنظیمات دیگری برای این پلاگین وجود دارد که می‌توانید با مراجعه به وبسایتهای زیر از آنها مطلع شوید.

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

https://github.com/tuupola/jquery_lazyload

برچسب ها:jquery ،lazy loading ،جی کوئری ،

نظرات()

پیاده سازی ajax از طریق jQuery در asp.net

جمعه 30 اردیبهشت 1390 04:31 ب.ظ ویرایش: جمعه 30 اردیبهشت 1390 04:54 ب.ظ

توسط: مجتبی

نوع مطلب: jQuery ،

ارسال به

در Jquery پیاده سازی ajax نسبت به روش معمولی که از طریق نوشتن توابع جاوا اسکریپت بود , نسبتا راحت تر شده است.
Jquery تعدادی تابع برای برقراری ارتباط باسرور بدون نیاز به postback خوردن صفحه ایجاد کرده که یکی از ساده ترین آنها &.ajax() است.
ساختار کلی استفاده از این تابع به شکل زیر است :

&.ajax(option);

اما option چیست؟ option متغیری است که تنظیمات ارتباط با سرور در آن قرار می گیرد. تنظیماتی از قبیل آدرس مورد نظر در سرور , پارامترهای مورد نیاز سرور , .. . .
ساختار کلی این متغیر به صورت زیر است :

Var option = {
    type: "", // type of sending   values: GET or POST
              url: "",            // server url
              data: "{}",     // parameters
              contentType: "application/json; charset=utf-8",     // request structure
              dataType: "json",                                                // data structure
              success: function(msg) {//ToDo: s.th. }        // on success function
    fail : function(msg) {//ToDo: s.th. }        // on fail function
}

Json ساختاری برای رد و بدل کردن اطلاعات است.اینجا اطلاعات بیشتری درباره‌ی json وجود دارد.
Type روش ارسال اطلاعات است که دو نوع post و get را قبول می کند.
url شامل آدرس تابع یا صفحه ی ما در سرور است که یکی از ساختارهای آن به شکل زیر است :

url : “PageName.Ext/MethodName”

برای مثال میخواهیم کاربر وقتی روی یک باتن کلیک کرد اطلاعات مربوط به یک کاربر مشخص را نمایش دهیم . برای این کار ما از یک webmethod در صفحه ی جاری استفاده میکنیم.
کد مربوط به سرور به این شکل است:

using System.Web.Services;
[WebMethod]
public static string GetUserData(string UserID)
{
return DB.UserData(UserID).ToString();
}

و سمت کلاینت هم از طریق جی کوئری رویداد کلیک برای باتن مورد نظر تعریف می کنیم:

$(document).ready(function() {
        $('#MyButton').click(function() {
              var option = {
                    type: "POST",
                    url: "defualt.aspx/GetUserData",
                    data: "{'UserID':'101'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function(msg) {
                            alert(msg.d);
                        }};
             $.ajax(option);
                });
            });

نکته مهمی که باید به آن اشاره شود این است که مقداری که از سمت سرور به عنوان نتیجه بر می گردد در سمت کلاینت با متغیری به نام msg قابل دسترسی است. و msg.d دسترسی به داده ی موجود در آبجکت بازگشی را ایجاد می کند.

برچسب ها:jquery ،جی کوئری ،ajax ،

نظرات()

طراحی فرم با jQuery

دوشنبه 12 اردیبهشت 1390 12:33 ب.ظ ویرایش: دوشنبه 12 اردیبهشت 1390 12:54 ب.ظ

توسط: مجتبی

نوع مطلب: jQuery ،

ارسال به

تو خیلی از سایتها وقتی داریم فرمی رو پر می‌کنیم برای اینکه به ما نشون بدن که کدوم فیلد رو داریم پر می‌کنیم یا به اصطلاح focus روی کدوم فیلده , وقتی وارد فیلد می‌شیم رنگ border و background فیلد رو تغییر می‌دن مثل عکسای پایین :

حالا ما برای اینکه بتونیم این کار رو انجام بدیم باید از جی‌کوئری استفاده کنیم. اینجا و اینجا درباره جی‌کوئری توضیح داده.

اول از همه باید کتابخونه‌ی جی‌کوئری رو دانلود کنیم و به صفحمون اضافه کنیم :

</head>

بعد از اینکه فرم رو طراحی کردیم (تکه ای از کد مربوط به فرم ) :

<asp:Label ID="Label1" runat="server" Text="نام کاربری : "></asp:Label>

<asp:TextBox ID="txtUserName" runat="server" ValidationGroup="ac" Width="175px"></asp:TextBox>

<asp:Label ID="Label2" runat="server" Text="کلمه عبور : "></asp:Label>

<asp:TextBox ID="txtPassWord" runat="server" TextMode="Password" ValidationGroup="ac"

Width="175px"></asp:TextBox>

شروع می‌کنیم به نوشتن دستورات جی‌کوئری . باید از دو متد focus و blur جی‌کوئری برای فهمیدن اینکه چه وقتی کاربر وارد فیلد شده و چه وقتی از اون خارج شده استفاده کنیم. برای تغییر ویژگی های فیلد هم باید از متد css جی‌کوئری استفاده کنیم.

$("#txtUserName").focus(

function() { $("#txtUserName").css("border-color", "#5bb53e")}

)

$("#txtUserName").blur(

function() { $("#txtUserName").css("border-color", "#000000") }

)

</script>

به شکل زیر توجه کنید: