# \[LAZY] jQuery.Lazy và tạo background-loading cực chất (ok)
{% file src="/files/18rVIHsbOD6gbQZTEhcR" %}
**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
```
@keyframes background-loading {
from {
background-position: -10000% 0, 0 0;
}
to {
background-position: 10000% 0, 0 0;
}
}
.post-thumbnail {
display: block;
position: relative;
height: 0;
animation-name: background-loading;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
background-color: #fff;
background-repeat: no-repeat;
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0)), linear-gradient(#e5e5e5 100%, transparent 0);
background-size: 99% 100%, cover;
}
```
**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
```
jQuery(document).ready(function($) {
$(".lazy-img").Lazy({
effect: "fadeIn",
afterLoad: function(element) {
element.removeClass('lazy-img');
element.parent('.image-container').css('background-image', 'none');
}
});
});
```
**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
```
@keyframes background-loading {
from {
background-position: -10000% 0, 0 0;
}
to {
background-position: 10000% 0, 0 0;
}
}
.post-thumbnail {
display: block;
position: relative;
height: 0;
animation-name: background-loading;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
background-color: #fff;
background-repeat: no-repeat;
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0)), linear-gradient(#e5e5e5 100%, transparent 0);
background-size: 99% 100%, cover;
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
&.lazy-img {
display: none;
}
}
}
```
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**
```
function twenty_twenty_one_post_thumbnail() {
$thumbnail_id = get_post_thumbnail_id( get_the_ID() );
$thumbnail_srcset = wp_get_attachment_image_srcset( $thumbnail_id, 'full' );
$thumbnail_sizes = wp_get_attachment_image_sizes( $thumbnail_id, 'full' );
$thumbnail_attachment = wp_get_attachment_image_src( $thumbnail_id, 'full' );
$thumbnail_url = get_the_post_thumbnail_url( get_the_ID(), 'full' );
$bottom_padding = 100;
if( $thumbnail_attachment[1] > 0 ) {
$bottom_padding = ($thumbnail_attachment[2]/$thumbnail_attachment[1]) * 100;
}
?>
0 ) {
$bottom_padding = ($thumbnail_attachment[2]/$thumbnail_attachment[1]) * 100;
}
?>
Document
```
**Ví dụ 2: Ví dụ tạo hình ảnh load mờ**
```
Document
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://javascriptuse.gitbook.io/javascript/lazy-jquery.lazy-va-tao-background-loading-cuc-chat-ok.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
