*** Tối ưu Offpage SEO nền tảng thành công SEO 2022 !
HOT **** Hướng dẫn tốt nhất về SEO Onpage 2022 !
Chú ý: Không chèn Link vô nghĩa trong bài viết !
Các thành viên bị lỗi đăng ký không gửi email vui lòng liên hệ Facebook: Lee Nam để được trợ giúp

Cách sử dụng lazy loading JQuery hình ảnh trong WordPress không cần dùng Pluign

Thảo luận trong 'Kiến thức' bắt đầu bởi tuandc, 7 Tháng tám 2017.

  1. tuandc

    tuandc Thành viên mới

    Tham gia ngày:
    31 Tháng năm 2017
    Bài viết:
    1
    Đã được thích:
    0
    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.
    #1

Chia sẻ trang này