Sử dụng Lazy Load ảnh không cần plugin trong wordpress

0
310

Sử dụng Lazy Load ở những trang web chứa nhiều hình ảnh sẽ giúp trang được tải nhanh hơn, tiết kiệm băng thông và giảm tải đáng kể cho server của bạn. Bạn viết dưới đây mình sẽ hướng dẫn sử dụng thư viện Lazy load của JQuery để tải ảnh trong wordpress.

Cài đặt thư viện Lazy load JQuery

Trước tiên bạn cần tải thư viện Lazy loadvề Tại đây. Sau đó tải lên host của bạn têp có tên jquery.lazyload.js. Bạn nên đặt file đó vào thư mục theme_của_bạn/js/ để tiện sử dụng

Sau đó mở file header.php (đặt trước thẻ đóng </head>) trong theme của bạn và thêm vào đoạn như sau:

<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 như IE6.

Tiếp theo là chèn đoạn script sau để 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 (đặt trước thẻ đóng </html>).

<script>$("img.lazy").lazyload({ effect : "fadeIn" });</script>

Lọc 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.

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;
}

2 hàm trên sẽ thực hiện việc thay đổi những thẻ img cũ có thuộc tính 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 của người dùng không mở Javascript hoặc không hỗ trợ Javascript.

Kết quả

Và thành quả chúng ta đạt được
Và thành quả chúng ta đạt được

Như vậy ở trên mình đã hướng dẫn các bạn sử dụng Lazy load ảnh để tăng tốc độ website mà không cần dùng plugin trong wordpress, ở các mã nguồn khác các bạn áp dụng tương tự. Nếu các bạn ngại chỉnh sửa code thì có thể sử dụng một trong số những plugin Lazy load sau cũng rất tốt và đơn giản: Lazy Load, a3 Lazy Load, Lazy Load by WP Rocket,…

Advertisement

BÌNH LUẬN

Please enter your comment!
Please enter your name here