اضافه کردن قابلیت Lazy Loading به گالریهای عکس وردپرس
توجه: اکنون در نسخههای جدید وردپرس این قابلیت به صورت پیشفرض در تمام سایتها فعال است و نیازی به استفاده از کدهای سفارشی برای دستیابی به مزایای Lazy Loading تصاویر وجود ندارد.
مرورگرهای جدید به صورت پیشفرض از قابلیت Lazy Loading تصاویر پشتیبانی میکنند. با استفاده از این ویژگی، پهنای باند مصرفی سایت شما کاهش پیدا میکند و سرعت نمایش صفحات هم هنگامی که تعداد تصاویر موجود در سایت زیاد باشد، بیشتر خواهد شد.
گالریهای تصویر در وردپرس که توسط Shortcode ایجاد میشوند هم میتوانند از این ویژگی جدید بهرمند شوند. جهت اضافه کردن قابلیت Lazy Loading به گالریهای وردپرس، این کد را در فایل functions.php قالب خود درج نمایید.
1 2 3 4 5 6 7 8 9 |
add_filter( 'do_shortcode_tag', 'roka_lazy_load_gallery_images', 99, 4 ); function roka_lazy_load_gallery_images( $output, $tag, $attr, $m ) { if( $tag !== 'gallery' ) return $output; $output = str_replace( '<img ', '<img loading="lazy" ', $output ); return $output; } |
این کار سبب میشود تا صفت loading=lazy به تصاویر شما اضافه شود و کاربران تا زمانی که با پیمایش صفحه به پایین، به تصویر نرسیده باشند، تصویر از هاست دانلود و نمایش داده نشود.