طراحی و بهینه سازیمشاهده

آخرین ارسال های تالار مشاهده انجمن

عنوانپاسخبازدیدتوسط
iconforumهنگام نصب اسکریپت تراوین با دیتا بیس مشکل دارم00meysam.D
iconforumاسکریپت ptciran548mostafaHD
iconforumلوگو سایت تفریحی226xara_2009
iconforumفروش اسکریپت آپلودبوی فارسی348admin2000
iconforumهوش مصنوعی به کمک نابیناها می‌آید06AynaZ
iconforumلزوم اخذ مجوز برای کانال‌های پرکاربر06AynaZ
iconforumتغییرات در وردپرس455AynaZ
iconforumمشکل عجیب در گوگل وب مستر و سئو وردپرس12296AynaZ
iconforumکتاب سئو - کتاب حرفه ای آموزش سئو (به صورت عملی)130AynaZ
iconforumافزونه کوتاه کننده236AynaZ
iconforumدرخواست دو زبان کردن وردپرس135AynaZ
درگاه پرداخت
درگاه پرداخت

بارگذاری تصاویر سایت به سبک Lazy Loading

جی کوئری , متفرقه
بارگذاری تصاویر سایت به سبک Lazy LoadingReviewed by M.J on Jan 16Rating: 5.0بارگذاری تصاویر سایت به سبک Lazy Loadingبارگذاری تنبل تصاویر (Images Lazy Loading) یک تکنیک بهینه سازی صفحات و بهبود تجربه کاربری است. این تکنیک، تصاویر رو تنها زمانی نشون میده که به اونها نیاز داشته باشیم. به طور میانگین، بیشتر از ۶۰% حجم خروجی وبسایت ها رو تصاویر تشکیل دادند

بارگذاری تنبل تصاویر (Images Lazy Loading) یک تکنیک بهینه سازی صفحات و بهبود تجربه کاربری است. این تکنیک، تصاویر رو تنها زمانی نشون میده که به اونها نیاز داشته باشیم. به طور میانگین، بیشتر از ۶۰% حجم خروجی وبسایت ها رو تصاویر تشکیل دادند (منبع) و این موضوع -وقتی تعداد و حجم تصاویر زیاد و سنگین باشند- در سرعت لود، پهنای باند و رضایت کاربران شما تأثیر منفی خواهد گذاشت. اینجاست که بازهم قدرت تنبلی اثبات میشه و این سبک بارگذاری با یک منطق ساده  “نمایش تصاویر -> در صورتی که برای کاربر قابل مشاهده باشد” یا به عبارت دیگه “نمایش تصاویر -> تنها زمانی که در اسکرول صفحه قرار بگیرد” اون شعر برو کار میکن سعدی رو له میکنه.  :)

* نکته: بارگذاری تنبل چند عیب کوچیک هم داره! به عنوان مثال: در بیشتر افزونه های Lazy Loading ویژگی src تصویر پشتیبانی نمیشه (یا اینکه با تصاویر و انیمیشن Sample مقدار دهی میشه) و تصویر اصلی شما در ویژگی جدیدی به نام data-src قرار میگیره و این موضوع با سینتکس استاندارد HTML5 همخونی نداره. (البته این هم بدون راه حل نیست…)

 

نحوه استفاده از بارگذاری تنبل


برای پیاده سازی این تکنیک، افزونه های جی کوئری زیادی هستند که هر کدوم ویژگی های مخصوص به خودشون رو دارند. در پست امروز، ما یک اسکریپت ساده و کم حجم رو برای شما همراهان جان آماده کردیم که با استفاده از اون میتونید تکنیک Lazy Loading رو به سادگی پیاده سازی کنید:

حتما بخوانید  اسلایدر پس زمینه به صورت جی کوئری

۱- فایل پیوستی رو از بخش پایینی این نوشته دانلود کنید.

۲- کتابخانه های Jquery و imglazyload رو در صفحه فراخوانی کنید:

۳- تصاویر (تگ های img) رو با ویژگی های src و data-src به صفحه اضافه کنید: (تصویر loading.svg انیمیشن بارگذاری تصاویر است)

۴- تابع imgLazyLoad رو به سلکتور تصاویر، تخصیص بدید:

نکته: این تابع چند آپشن اضافه هم داره که میتونید از اونها استفاده کنید. مثال:

۵- پایان 🙂


به کانال تلگرام بیست اسکریپت بپیوندید !

دانلود

خرید هاست حرفه ای سازگار با انواع اسکریپت همراه با نصب رایگان

مطلب مفیدی بود ؟
نویسنده : admin تاریخ : 1394/10/26 2 جی کوئری , متفرقه

لینک کوتاه مطلب : http://www.20script.ir/?p=16409

کلمات کلیدی پست :
درگاه پرداخت
مطالب مرتبط
1,837افزونه وردپرس سئو تصاویر گراواتار Gravatar SEO تاریخ : 1393/12/3
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب