
Áp dụng lazy loading JQuery hình ảnh trong WordPress

Trong bài viết Trì hoãn tải ảnh với lazy loading JQuery mình đã giới thiệu về Lazy loading là gì và cách nó làm việc để giúp website của bạn tải nhanh hơn, giúp tiết kiệm được băng thông nhiều hơn. Với công dụng tuyệt vời như vậy thì nó đang là xu hướng của nhiều website kể cả WordPress. Trong bài viết này mình sẽ hướng dẫn bạn các code tay để áp dụng Lazy loading cho WordPress mà không cần sử dụng Plugin.
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:
<script src="<?php echo esc_url( get_template_directory_uri());?>/js/jquery.lazyload.js"></script>
<noscript><style>.lazy {display: none;}</style></noscript>
hoặc nếu theme của bạn là theme mua thì bạn mở file functions.php
và thêm đoạn sau vào dưới cùng.
function tdc_lazyload() {
wp_enqueue_script('jquery_lazy_load', get_template_directory_uri() . '/js/jquery.lazyload.js', array('jquery'), '1.9.1');
}
add_action('wp_enqueue_scripts', 'tdc_lazyload');
function disnone_lazy() {?><noscript><style>.lazy {display: none;}</style></noscript><?php}
add_action('wp_head', 'disnone_lazy');
Đ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.
<script>$("img.lazy").lazyload({ effect : "fadeIn" });</script>
Hoặc nếu theme bạn là theme mua thì bạn mở file functions.php
và thêm đoạn sau vào cuối.
function tdc_lazyloadft() {
echo '
<script>
$("img.lazy").lazyload({ effect : "fadeIn" });
</script>';
}
add_action('wp_footer', 'tdc_lazyloadft');
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.
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.

Đây là đoạn mã hiển thị trên trình duyệt hỗ trợ Javascript

Đây là đoạn mã hiển thị trên trình duyệt không hỗ trợ Javascript
Chúc bạn thành công !
