[LAZY] jQuery.Lazy và tạo background-loading cực chất (ok)

http://jquery.eisbehr.de/lazy/example_basic-usage

5KB
jquery.lazy.min.js
Open

Ví dụ đã thực hành trên wordpress

Bước 1: tạo hình mờ load :)

C:\xampp\htdocs\wordpress3\wp-content\themes\twentytwentyone\functions.php

// Responsive embeds script.
wp_enqueue_style(
	'custom-style',
	get_template_directory_uri() . '/assets/css/custom.css',
	array(), wp_get_theme()->get( 'Version' )
);
// Includefile jquery.lazy.min.js.
wp_enqueue_script('lazy-script', get_template_directory_uri() . '/assets/js/jquery.lazy.min.js',array( 'jquery' ),
	wp_get_theme()->get( 'Version' ),
	true
);
wp_enqueue_script('custom-script', get_template_directory_uri() . '/assets/js/custom.js',array( 'jquery' ),
	wp_get_theme()->get( 'Version' ),
	true
);

C:\xampp\htdocs\wordpress3\wp-content\themes\twentytwentyone\template-parts\header\excerpt-header.php

C:\xampp\htdocs\wordpress3\wp-content\themes\twentytwentyone\assets\css\custom.scss

Bước 2: Sau khi ảnh đã load rồi chúng ra loại bỏ ảnh nền load mờ đi

C:\xampp\htdocs\wordpress3\wp-content\themes\twentytwentyone\assets\js\custom.js

Bước 3: Xử lý css để khi bức ảnh không nhìn thấy biểu tượng

C:\xampp\htdocs\wordpress3\wp-content\themes\twentytwentyone\assets\css\custom.scss

Mấu chốt ở đây là ta tạo padding-bottom bằng 50% (ví dụ) và bức ảnh ở trong chưa được load nó display: none đi để nó không nhìn thấy ảnh mặc định còn thiếu src. Sau đó ngay sau khi đã phát hiện ảnh đã load bằng thư việc lazy thì chúng ra cho chúng hiển thị lên bức ảnh :)

Bước 4: Xem cách lazy hoạt động như thế nào? Ở đây chúng ta tạo thật nhiều ảnh xem nếu bức ảnh chưa được tải kịp chúng sẽ vẫn còn class lazy-img

Hoặc chúng ta dùng mã sau để test

Ví dụ 1: Cơ bản

Ví dụ 2: Ví dụ tạo hình ảnh load mờ

PreviousMột cách đặt và gán giá trị trong mảng, object cự ngắn gọn (ok)NextVí dụ Sử dụng sẵn thư viện masonry của wordpres (ok)

Last updated

Was this helpful?