Cài đặt thư viện lazy loading JQuery Đầu tiên bạn hãy tải thư viện Lazy loading về (đọc lại bài Trì hoãn tải ảnh với lazy loading JQuery để biết chỗ tải nhé). Sau đó tải lên host của bạn têp có tên jquery.lazyload.js. Bạn nên tải vào thư mục theme_của_bạn/js/ Sau đó mở file header.php trong theme của bạn và thêm vào đoạn như sau: Mã: <script src="<?php echo esc_url( get_template_directory_uri());?>/js/jquery.lazyload.js"></script> <noscript><style>.lazy {display: none;}</style></noscript> Đoạn trên mình có chèn thêm một đoạn style đặt trong thẻ <noscript> là để ẩn những thẻ <img> lazy chỉ để hiển thị img thường trong trường hợp trình duyệt không bật hoặc không hỗ trợ Javascript. Tiếp theo là chèn đoạn <script> để nhận dạng và thực thi Lazy load. Bạn hãy mở file footer.php và thêm đoạn sau vào. Mã: <script>$("img.lazy").lazyload({ effect : "fadeIn" });</script> Như vậy là bạn đã cài đặt xong lazy loading rồi. Bây giờ mình sẽ thực hiện việc thay đổi các thẻ <img> trong nội dung để làm. Lọc nội dung và chèn thẻ hình ảnh lazy load Bạn hãy mở file function.php lên là thêm hai hàm sau vào file. Mã: function filter_lazyload($content) { return preg_replace_callback('/(<\s*img[^>]+)(src\s*=\s*"[^"]+")([^>]+>)/i', 'preg_lazyload', $content); } add_filter('the_content', 'filter_lazyload'); function preg_lazyload($img_match) { $img_replace = $img_match[1] . ' data-original' . substr($img_match[2], 3) . $img_match[3]; $img_replace = preg_replace('/class\s*=\s*"/i', 'class="lazy ', $img_replace); $img_replace .= '<noscript>' . $img_match[0] . '</noscript>'; return $img_replace; } hai hàm trên sẽ thực hiện việc thay đổi những img thẻ cũ có src thành data-original. Đồng thời giữ lại một thẻ img thường, nhưng được đặt trong cặp thẻ <noscript>. Thẻ này sẽ được thực thi khi trình duyệt không mở Javascript hoặc không hỗ trợ Javascript.