ติดตั้ง Lazy Loading ให้กับ Yii Framework

wave
มานพ กองอุ่น 27 ต.ค. 2019 09:26:53 4,030

ในบทเรียนรู้นี้เรามาติด Lazy Loading ให้กับ Yii Framework 2 เพื่อให้การ Load Image, Iframe หรือ Video มีความลื่นไหลมากยิ่งขึ้น ดังที่ Google แนะนำตอนตรวจสอบ Page Speed โดยสามารถดูรายละเอียดเพิ่มเติมได้ที่นี่ https://web.dev/native-lazy-loading

ขั้นแรกทำการ RegisterJS ก่อน

โดยใช้คำสั่งในการ registerJs ลงใน Theme Layout หลักของเราเลย เช่น frontend/views/layouts/main.php หรือ layout ของ theme ที่เราสร้างขึ้น ดังนี้

<?php $this->registerJs("
        if ('loading' in HTMLImageElement.prototype) {
            const images = document.querySelectorAll('img[loading=\"lazy\"]');
            images.forEach(img => {
              img.src = img.dataset.src;
            });
          } else {
            // Dynamically import the LazySizes library
            const script = document.createElement('script');
            script.src =
              'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/4.1.8/lazysizes.min.js';
            document.body.appendChild(script);
          }
        ")?>

จากนั้นในรูปภาพก็ใส่ attribute สำหรับ lazy load ดังนี้

<?=Html::img($directoryAsset."/img/landing.png", ['class' => 'img-fluid lazyload', 'loading' => 'lazy', 'data' => ['src' => $directoryAsset."/img/landing.png"]])?>

จะเห็นว่ามี class lazyload และ มี attribute loading="lazy" เป็นอันเสร็จเรียบร้อย

หมายเหตุ การตั้งค่านี้รองรับใน Chrome version 76 ขึ้นไป


ความคิดเห็น

หากบทเรียนรู้มีความผิดพลาดประการใด หรือมีข้อเสนอแนะกรุณาแจ้ง contact@programmerthailand.com

เขียนบทเรียนรู้ของคุณ

รายละเอียด
  • ดู 4,030
  • รักเลย 0
  • หมวดหมู่ Yii Framework 2 (Yii2)
  • เขียนเมื่อ
  • แก้ไขเมื่อ
  • Tags yii2 lazyload lazy lazyloading
ข้อมูลผู้เขียน
มานพ กองอุ่น

มานพ กองอุ่น

เป็นสมาชิกเมื่อ: 18 ธ.ค. 2009

เนื้อหาที่เกี่ยวข้อง