بارگذاری تنبل تصاویر مدیریت آپلود تصاویر ویژگی های اصلی افزونه

• ترجمه

این روزها، مانع اصلی سرعت بارگذاری سریع وب سایت، تصاویر است. این امر به ویژه برای پروژه های تجارت الکترونیکی معمول است. در آنها، تصاویر، معمولاً کاملاً "سنگین"، بخش عمده ای از محتوای صفحه را تشکیل می دهند. این معمولاً باعث می شود که مرورگر کاربر مجبور باشد چندین مگابایت داده گرافیکی را برای نمایش صفحه دانلود کند. چگونه در این شرایط سرعت بارگذاری صفحه را افزایش دهیم؟ پاسخ به این سوال موضوع مطلبی است که امروز ترجمه آن را منتشر می کنیم.

در اینجا چند تصویر بارگذاری شده است تا این صفحه را تشکیل دهد:

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

اکنون اجازه دهید درخواست های شبکه انجام شده در هنگام بارگیری صفحه را تجزیه و تحلیل کنیم:

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

چطوری میشه اینو تعمیر کرد؟ واقعاً هیچ راهی برای "رفع" واقعی این مشکل وجود ندارد، اما کارهای زیادی وجود دارد که می توانید برای بهینه سازی بارگذاری تصویر انجام دهید. روش های زیادی برای بهینه سازی تصاویر مورد استفاده در صفحات وب وجود دارد. از جمله آنها می توان به استفاده از فرمت های مختلف فایل های گرافیکی، فشرده سازی داده ها، استفاده از تکنیک های انیمیشن blur و استفاده از CDN اشاره کرد. من می خواهم در مورد به اصطلاح "بارگذاری تنبل" تصاویر صحبت کنم. به طور خاص، ما در مورد نحوه پیاده سازی این تکنیک در وب سایت های React صحبت خواهیم کرد، اما از آنجایی که این تکنیک مبتنی بر مکانیسم های جاوا اسکریپت است، می توان آن را در هر پروژه وب ادغام کرد.

تصویر کلاس PureComponent را گسترش می دهد ( render() (const (src) = this.props; return ; } }
یک URL را به عنوان یک ویژگی می گیرد و از آن برای ارائه عنصر img HTML استفاده می کند. در اینجا کد مربوطه در JSFiddle است. تصویر زیر صفحه حاوی این کامپوننت را نشان می دهد. لطفا توجه داشته باشید که برای دیدن تصویری که نمایش داده می شود، باید محتویات صفحه را اسکرول کنید.

برای پیاده سازی تکنیک بارگذاری تنبل تصاویر در این کامپوننت، باید سه مرحله زیر را انجام دهید:

Render() (بازگشت ; }

ComponentDidMount() ( this.observer = new IntersectionObserver(() => (// اینجا کد مرحله سوم است)، ( root: document.querySelector(.container) )); this.observer.observe(this . عنصر); ) .... render() (return this.element = el) />; )
بیایید به این کد نگاه کنیم. در اینجا آنچه انجام شده است:

• یک ویژگی ref به عنصر img اضافه شده است. این به شما امکان می دهد بعداً مرجع تصویر را در src بدون نیاز به رندر مجدد مؤلفه به روز کنید.
• یک نمونه جدید IntersectionObserver ایجاد شده است (در زیر در مورد آن صحبت خواهیم کرد).
• از شی IntersectionObserver خواسته می شود که تصویر را با استفاده از ساختار Observer(this.element) مشاهده کند.

در نگاه اول، این ویژگی API ممکن است چندان واضح به نظر نرسد، اما، در واقع، ساختار آن بسیار ساده است. به نمونه IntersectionObserver چندین پارامتر ارسال می شود. به طور خاص، ما از پارامتر root استفاده کردیم که به ما امکان می دهد عنصر DOM ریشه را که به عنوان یک ظرف در نظر می گیریم، در مورد تقاطع عنصر با مرزی که باید بدانیم مشخص کنیم. به طور پیش فرض این ناحیه ای است که بخش قابل مشاهده صفحه (نمایشگاه) در آن قرار دارد، اما من به صراحت آن را به گونه ای تنظیم کردم که از ظرف موجود در عنصر JSFiddle iframe استفاده کند. این به این منظور انجام شد که بعداً یک امکان را در نظر بگیریم که برای استفاده از عناصر iframe طراحی نشده است.

دلیل اینکه استفاده از IntersectionObserver برای تعیین زمانی که یک عنصر قابل مشاهده می‌شود، محبوب‌تر از روش‌های سنتی‌تر مانند استفاده از onScroll و getBoundingClientRect() است زیرا مکانیسم‌های IntersectionObserver خارج از رشته اصلی اجرا می‌شوند. با این حال، تماس برگشتی که پس از تشخیص IntersectionObserver یک تقاطع عنصر با کانتینر فراخوانی می شود، به طور طبیعی روی رشته اصلی اجرا می شود، بنابراین کد آن نباید خیلی سنگین باشد.

This.observer = new IntersectionObserver(entries => (entries.forEach(entry => ( const ( isIntersecting ) = entry; if (isIntersecting) ( this.element.src = this.props.src; this.observer = this.observer .disconnect(); ))); ), ( root: document.querySelector(."container") )); ....
هنگامی که یک تقاطع تشخیص داده می شود، آرایه ای از عناصر ورودی به callback ارسال می شود، که شبیه مجموعه ای از عکس های فوری از وضعیت همه عناصر هدف است که تقاطع یک مرز مشخص برای آنها شناسایی شده است. ویژگی isIntersecting جهت تقاطع را نشان می دهد. اگر عنصر تماشا شده از خارج از عنصر ریشه بیفتد، درست است. اگر عنصر از عنصر ریشه خارج شود، نادرست است.

بنابراین، وقتی به نظر می رسد که یک عنصر مرز پایین ظرف را قطع کرده است، من به صورت دستی ویژگی src آن را تنظیم می کنم و نظارت را برای آن غیرفعال می کنم، که دیگر لازم نیست.

با این حال، اگر نگاه دقیق‌تری به آنچه به دست آورده‌ایم بیندازیم، معلوم می‌شود که چیزی نه چندان خوب در اینجا یافت می‌شود. برای دیدن این، به سرعت صفحه را اسکرول کردم، در حالی که سرعت اتصال شبکه را کاهش دادم.

از آنجایی که ما تصویر را تنها پس از رسیدن به ناحیه ای که در آن باید قابل مشاهده باشد بارگذاری می کنیم، هیچ راهی برای کاربر وجود ندارد که صفحه را اسکرول کند و منطقه اشغال شده توسط تصویر و البته خود تصویر را قبل از آن ببیند. لود شده. وقتی وب‌سایت‌ها از رایانه‌های معمولی متصل به اینترنت سریع مشاهده می‌شوند، این مشکلی ایجاد نمی‌کند. اما بسیاری از کاربران مدرن از طریق تلفن خود از وب سایت ها بازدید می کنند، گاهی اوقات از شبکه های 3G یا حتی بدتر از اتصالات EDGE استفاده می کنند.

با این حال، مقابله با این مشکل چندان دشوار نیست. این را می توان انجام داد زیرا Intersection Observer API به توسعه دهنده این امکان را می دهد که مرزهای عنصر ریشه (در مورد ما، عنصر .container) را گسترش دهد یا منقبض کند. برای استفاده از این فرصت کافی است یک خط کد را به جایی که کانتینر ریشه پیکربندی شده است اضافه کنید:

RootMargin: "0px 0px 200px 0px"
در ویژگی rootMargin باید رشته ای بنویسید که ساختار آن مطابق با قوانین CSS مورد استفاده برای پیکربندی پارامترهای تورفتگی عناصر باشد. در مورد ما، به سیستم می گوییم که مرز پایینی که برای تشخیص تقاطع عنصر با ظرف استفاده می شود باید 200 پیکسل افزایش یابد. این بدان معنی است که زمانی که عنصر در ناحیه ای قرار می گیرد که 200 پیکسل زیر مرز پایین عنصر ریشه قرار دارد، تماس مربوطه فراخوانی می شود (مقدار پیش فرض در اینجا 0 است).

در اینجا کدی است که این تکنیک را پیاده سازی می کند.

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

تصاویر به دو روش اصلی بر روی یک صفحه بارگذاری می شوند: از طریق یک تگ HTML و با استفاده از ویژگی CSS background-image . بنابراین ابتدا به مثال تگ نگاه می کنیم و سپس به بررسی تصاویر پس زمینه CSS می پردازیم.

بیایید با چند نشانه گذاری ساده HTML برای درج تصاویر در صفحه شروع کنیم.

نشانه گذاری برای تصاویر لود شده تنبل تقریباً یکسان است.

مرحله دوم این است که از بارگذاری زودهنگام تصویر خودداری کنید. مرورگر از ویژگی src تگ img برای راه اندازی بارگذاری تصویر استفاده می کند. و مهم نیست که این تصویر اولین یا هزارمین باشد. اگر مرورگر ویژگی src را در نشانه گذاری پیدا کند، بلافاصله شروع به بارگیری تصویر می کند، حتی اگر خارج از محدوده باشد.

برای اینکه بارگذاری یک تصویر را به تأخیر بیندازید، باید URL تصویر را در ویژگی دیگری غیر از ویژگی src قرار دهید، برای مثال در data-src. و از آنجایی که ویژگی src خالی است، مرورگر این تصویر را بارگذاری نمی کند.

اکنون، از آنجایی که از بارگیری فوری تصویر جلوگیری کرده ایم، به روشی نیاز داریم تا به مرورگر بگوییم چه زمانی تصویر باید بارگذاری شود. در غیر این صورت هرگز اتفاق نخواهد افتاد. برای انجام این کار، بررسی می کنیم که آیا تصویر (در مورد ما، مکان نگهدار آن یک مستطیل خاکستری است) در ناحیه قابل مشاهده است یا خیر، و سپس آن را بارگذاری می کنیم.

دو راه برای تعیین اینکه آیا یک تصویر در محدوده است یا خیر وجود دارد. بیایید به هر یک از این نمونه ها از طریق کدهای آنها نگاه کنیم.

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

این روش از کنترل کننده‌ها برای رویدادهای زیر استفاده می‌کند: اسکرول، تغییر اندازه، و orientationChange. رویداد اسکرول موقعیت فعلی کاربر را در صفحه هنگام عبور از آن تعیین می کند. رویدادهای تغییر اندازه و تغییر جهت به همان اندازه مهم هستند. رویداد تغییر اندازه با تغییر اندازه پنجره مرورگر و رویداد orientationChange هنگامی که جهت دستگاه از حالت افقی به حالت عمودی و دوباره برمی گردد فعال می شود.

ما از این سه رویداد برای تشخیص تغییرات صفحه و محاسبه تعداد تصاویری که باید روی صفحه نمایش داده شوند استفاده خواهیم کرد. پس از این همه ما آنها را آپلود خواهیم کرد.

هنگامی که هر یک از این رویدادها رخ می دهد، تمام تصاویر صفحه را می یابیم که هنوز بارگذاری نشده اند. از بین این تصاویر دقیقاً آنهایی را انتخاب می کنیم که در قسمت قابل مشاهده مرورگر هستند. انتخاب بر اساس محاسبات افست بالای تصویر، موقعیت بالای فعلی سند و ارتفاع پنجره انجام می شود. بنابراین اگر تصویری در viewport ظاهر شد، URL آن را از ویژگی data-src انتخاب می کنیم و آن را به ویژگی src منتقل می کنیم، سپس مرورگر تصویر را بارگذاری می کند.

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

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

در اینجا یک نمونه کار از این رویکرد آورده شده است:

بنابراین در این مقاله به روش اول بارگذاری تنبل تصویر و در مقاله بعدی به روش دیگری خواهیم پرداخت.

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

قبل از شروع کار با مزایای بارگذاری تنبل، به ما اطلاع دهید که بارگذاری تنبل چیست و چگونه کار می کند.

بارگذاری تنبل مکانیزمی است که در آن نمی‌توانیم بارگذاری یک شی خاص را به تعویق بیندازیم، می‌تواند یک ویدیو یا فقط یک تصویر باشد تا زمانی که بتوانیم آن را انجام دهیم. به زبان ساده، بارگذاری تنبل به معنای بارگیری اشیاء بر حسب تقاضا به جای بارگیری همه اشیا به طور پیش فرض است. مشکل دانلود خودکار خیلی آزار دهنده است. این سرعت سایت را افزایش می دهد، بنابراین اشیا سریعتر بارگیری می شوند.

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

محتوای دانلود شده تنبل توسط موتورهای جستجو نمایه نخواهد شد. چون این مطالب ایندکس نشده است که بدیهی است رتبه پایین تری برای این موارد به همراه خواهد داشت. به این ترتیب، فرآیند سئو برای نمایش در نتایج جستجو به محتوای بارگذاری شده تکیه نمی کند.

افسانه است! بهینه سازی وب سایت ارتباط چندانی با بارگذاری تنبل ندارد. اسکریپت Ajax همچنان اجرا خواهد شد. تنها تفاوت این است که در پس زمینه اجرا می شود. سایت سریعتر بارگذاری می شود! در مورد آن هیچ تردیدی نیست! تاثیری در بهینه سازی سایت ندارد.

بارگذاری تنبل مکانیزمی است که می تواند شما را به چیزی برساند که همه میل دارند - وب سایتی با سرعت رعد و برق. بیایید با آن روبرو شویم: همه ما بی صبرانه منتظر بارگذاری محتوا هستیم. زمانی که تاخیری رخ داد، حتی چند ثانیه باعث خروج ما از صفحه وب می شود. با بارگذاری تنبل، لازم نیست منتظر بارگذاری تمام محتوا باشیم.

چگونه منابع کمتری را که نیاز دارید دانلود کنید، فضایی برای دانلود غیرضروری تمام محتوای یک صفحه وب وجود ندارد. این باعث می شود صفحه شما بسیار سریعتر بارگذاری شود.

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

در بارگذاری تنبل در وردپرس، همچنین می توانید به تمام مطالب دسترسی سریع تری داشته باشید. ، اگرچه ثابت می ماند، اما سرعت بارگذاری محتوا افزایش می یابد.

می توان از دانلودهای غیرضروری محتوا جلوگیری کرد و بسیاری از داده های شما را نیز می توان ذخیره کرد. محتوای مورد نظر شما را می توان با اسکرول کردن به پایین صفحه مشاهده کرد.

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

این پلاگین بارگذاری تنبل یک تنوع سبک وزن و وزن از بارگذاری تنبل سنتی است. دارای یک سیستم پشتیبانی ویژه است که تصاویر با وضوح بالا را با نمایشگرهای سازگار با شبکیه ارائه می دهد. افزونه Image Lazy Load همچنین شامل گزینه هایی برای بارگذاری تصاویر در گوشی های هوشمند با فشرده سازی تعداد پیکسل هایی است که به شما می رسد قبل از اینکه بتوانید تصاویر را مشاهده کنید.

این افزونه بارگذاری تنبل به کاربران امکان می دهد تصاویر و ریز عکسها، گراواتارها، فریم ها را در پست ها انتخاب کنند و محتوا را با مکان نگهدار جایگزین کند. هنگام انتخاب یک مکان نگهدار خاص، می توانید تصاویر با کلاس های مختلف را نادیده بگیرید. BJ Lazy Load همچنین اندازه‌های مختلف تصاویر بهینه‌سازی شده را برآورده می‌کند و به طور خودکار تصاویر HiDPI را برای صفحه‌های مختلف HiDPI مانند صفحه نمایش شبکیه اپل ارائه می‌کند.

بارگذاری تنبل Jquery از تصاویر مختلف را اضافه می کند. بهترین نکته در مورد این افزونه این است که استفاده از آن بسیار آسان است. تنها کاری که باید انجام دهید این است که به سادگی آن را نصب و فعال کنید. تصاویر سایتی که بازدید می کنید به طور خودکار با اسکرول کردن به پایین صفحه بارگیری می شوند. برای بارگذاری تصاویر لازم نیست مدت زمان زیادی منتظر بمانید. درست مانند زمانی که یک صفحه وب را باز می کنید و به پایین صفحه اسکرول می کنید، تصاویر قبلاً بارگذاری شده اند!

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

اغلب به آن "پیمایش بی نهایت" نیز می گویند. احتمالاً هنگامی که محتوا در ابتدا در سایت وجود ندارد، تأثیر مشابهی را مشاهده کرده اید، اما همانطور که صفحه را پیمایش می کنید، به آرامی بارگذاری می شود.

مدتها پیش با درخواست برای نوشتن مقاله ای در مورد نحوه اجرای چنین افکتی به بخش "پیشنهادات شما" نامه نوشتیم:

بنابراین تصمیم گرفتم اجرای آن را شروع کنم. ممنون که به من ایده دادید بیا شروع کنیم...

مانند اکثر موارد، ما با گنجاندن کتابخانه jQuery شروع می کنیم:

و اکنون باید کمی منحرف شوید و من ماهیت روش را برای شما توضیح خواهم داد. همه اینها به این منظور شروع می شود که تمام عناصر سایت (نمونه کارها یا نظرات شما) بارگیری نشود، بلکه آنها در صورت نیاز بارگذاری شوند. به عنوان مثال، هنگامی که کاربر بر روی دکمه "نمایش بیشتر" کلیک می کند. به این ترتیب صفحه بسیار سریعتر بارگذاری می شود. و اکنون نکته اینجاست که با استفاده از فناوری ajax عنصر مورد نیاز (div) و یک فایل شخص ثالث را در صفحه فرود خود بارگذاری می کنیم. همه چیز چه در تئوری و چه در عمل بسیار ساده است و به زودی این را خواهید دید.

حالا بیایید یک بلوک اصلی مثلاً با تصاویر کارهایمان ایجاد کنیم. بیایید فرض کنیم آیکون ها را ترسیم کرده و با کلیک روی یک دکمه بارگذاری می کنیم. من این ساختار را ایجاد کردم:

نمونه کارها بیشتر نشان بده، اطلاعات بیشتر...

همانطور که می بینید، همه چیز ساده است. اما به چه نکاتی باید توجه کرد؟ و باید به div با id="smartPortfolio"، id="moreButton" و id="loadingDiv" توجه کنید، زیرا از آنها در اسکریپت استفاده می شود، که به ما کمک می کند محتوا را از صفحات دیگر بارگیری کنیم. SmartPortfolio یک "ظرف" برای مجموعه ما است. MoreButton - این دکمه ما خواهد بود، با کلیک کردن، قسمت دیگری از نمونه کارها بارگیری می شود. LoadingDiv - ناحیه ای که وقتی نمونه کارها به طور کامل باز می شود یا خطایی رخ می دهد، متن نمایش داده می شود.

به عنوان مثال، برخی از خوانندگان همچنان سعی می کنند این اسکریپت را نه روی سرور آزمایش کنند، بلکه به سادگی فایل فهرست را در مرورگر باز می کنند. در این صورت، پیغام خطا را مشاهده خواهند کرد. علاوه بر این، اگر اتصال بسیار کند است، ممکن است دانلود فایل ها زمان بر باشد، و برای اینکه کاربر بفهمد که فرآیند در حال انجام است، می توانید پیامی را در آنجا وارد کنید که داده ها در حال بارگیری هستند یا مکان (یک تصویر، یک پیشرفت) نشانگر یا چیز دیگری).

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

برای کسانی که قصد ویرایش دارند، در اینجا خود فیلمنامه آمده است:

وار تنبل = تنبل || ()؛ (function($, lazyload) ( "use strict"; var page = 2، buttonId = "#moreButton"، loadingId = "#loadingDiv"، container = "#smartPortfolio"; lazyload.load = function() ( var url = "./pages/" + page + ".html"; $(buttonId).hide(); $(loadingId).show(); $.ajax(( URL: url, success: function(response) ( if ( !response || answer.trim() == "هیچکدام") ($(buttonId).fadeOut(); $(loadingId).text("پورتفولیو به طور کامل بارگیری شد"); return; ) appendContests(response); )، خطا : function(response) ($(loadingId).text("با عرض پوزش، در درخواست خطایی وجود داشت. لطفاً صفحه را بازخوانی کنید."); ) )); var appendContests = function(response) ( var id = $(buttonId $(buttonId).show();$(loadingId).hide();$(response).appendTo($(container)); page += 1; )))(jQuery، lazyload) ;

بنابراین، اکنون ارزش آن را دارد که در مورد پرونده هایی که از آنها اطلاعات بارگیری می کنیم صحبت کنیم. اسکریپت فرض می‌کند که اینها فایل‌هایی با نام‌های 2.html...5.html و غیره هستند. که حاوی اطلاعات ما است. برای مثال اولین فایلی که بارگذاری می کنم 2.html است و محتوای زیر را دارد:

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

مسیر در اسکریپت به صورت زیر مشخص می شود:

Var url = "./pages/" + page + ".html";

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

ButtonId = "#moreButton", loadingId = "#loadingDiv"، container = "#smartPortfolio";

و همانطور که قبلاً گفتم، قبل از تگ بدنه بسته، خود اسکریپت را اضافه می کنیم:

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

• ترجمه
• آموزش

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

با استفاده از کانتینر می توانید نسبت تصویر را کنترل کنید و همچنین از نشانگر بارگذاری استفاده کنید که در صورت سنگین بودن تصاویر بسیار راحت است.

به عنوان مثال، برای تنظیم نسبت تصویر روی 4:3، می توانید از CSS زیر استفاده کنید:

Img_wrapper( موقعیت: نسبی؛ padding-top: 75%؛ سرریز: پنهان؛ ) .img_wrapper img( موقعیت: مطلق؛ بالا: 0؛ عرض: 100%؛ کدورت: 0؛ )
برای اطمینان از اینکه تصویر فقط پس از بارگیری کامل در مرورگر نمایش داده می شود، باید یک رویداد onload برای تصویر اضافه کنید و از جاوا اسکریپت برای مدیریت رویداد استفاده کنید:

تابع imgLoaded(img)( var $img = $(img)؛ $img.parent().addClass("loaded"); );
کد تابع داخل تگ HEAD باید در انتهای آن، پس از هر jQuery یا پلاگین دیگری قرار گیرد. پس از بارگذاری کامل تصویر، باید در صفحه نمایش داده شود:

Img_wrapper.loaded img( opacity: 1; )
برای جلوه یک ظاهر صاف یک تصویر، می توانید از انتقال CSS3 استفاده کنید:

Img_wrapper img( موقعیت: مطلق؛ بالا: 0؛ عرض: 100%؛ کدورت: 0؛ -webkit-transition: opacity 150ms؛ -moz-transition: opacity 150ms؛ -ms-transition: opacity 150ms؛ transition: opacity 150ms؛)
یک مثال زنده از این روش موجود است.

ما از تابع slideLoaded() برای کنترل فرآیند استفاده می کنیم:

تابع slideLoaded(img)( var $img = $(img)، $slideWrapper = $img.parent()، total = $slideWrapper.find("img").length، %Loaded = null؛ $img.addClass("بارگذاری شده است "); var loaded = $slideWrapper.find(".loaded").length؛ if(loaded == total)(%. = بارگذاری شده/مجموع * 100؛ ); );
به تصاویر بارگذاری شده کلاس بارگذاری شده اختصاص داده می شود و پیشرفت کلی نمایش داده می شود. جاوا اسکریپت باید بعد از هر چیز دیگری در انتهای تگ HEAD قرار گیرد.

var heroArray = [ "/uploads/hero_about.jpg"، "/uploads/hero_history.jpg"، "/uploads/hero_contact.jpg"، "/uploads/hero_services.jpg" ]
هنگامی که یک بازدید کننده از سایت بازدید می کند، پس از بارگذاری صفحه اصلی، تصاویر شروع به بارگذاری در حافظه پنهان می کنند. برای اطمینان از عدم تداخل حافظه پنهان با نمایش محتوای فعلی، باید قابلیت جاوا اسکریپت را به رویداد بارگذاری پنجره اضافه کنید:

تابع preCacheHeros())($.each(heroArray, function())( var img = new Image(); img.src = this; )); ); $(window).load(function())( preCacheHeros(); ));
این روش قابلیت استفاده سایت را بهبود می بخشد، اما بار اضافی بر روی سرور وارد می کند. این باید در هنگام اجرای چنین عملکردی در نظر گرفته شود. علاوه بر این، لازم است مسیرهای احتمالی بازدیدکنندگان در سایت و تصاویر کش واقع در صفحاتی که کاربر به احتمال زیاد از آنها بازدید می کند، در نظر گرفته شود. برای درک چنین مسیرهایی از طریق سایت، تجزیه و تحلیل آمار ترافیک ضروری است.

شایان ذکر است که URL تصویر در data-src مشخص شده است نه src. این لازم است تا مرورگر بلافاصله تصویر را دانلود نکند. در عوض، src با یک پیکسل GIF شفاف base64 بارگذاری می شود که تعداد رفت و برگشت ها به سرور را کاهش می دهد.

تنها چیزی که باقی می ماند این است که زمانی که رویداد مورد نظر رخ می دهد، مقدار src را به data-src تغییر دهید. جاوا اسکریپت به شما امکان می دهد تصاویر را به صورت تدریجی بارگذاری کنید:

تابع lazyLoad())( var $images = $(".lazy_load")؛ $images.each(function())( var $img = $(this)، src = $img.attr("data-src") $ img .on("load",imgLoaded($img)) .attr("src",src); )); ); $(window).load(function())( lazyLoad(); );