> For the complete documentation index, see [llms.txt](https://javascriptuse.gitbook.io/advanced/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://javascriptuse.gitbook.io/advanced/javascript/lazy-load-voi-owl.carousel.js-ok.md).

# Lazy load với owl.carousel.js (ok)

![](/files/0TVfa3WXzXTSe3TdiMXa)

![](/files/J1SdbPchOpjdg1eWsXAx)

```
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Latest compiled and minified CSS & JS -->
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
  <script src="https://code.jquery.com/jquery.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
  <title>Document</title>
</head>

<body>
  <div class="owl-carousel owl-theme">
    <img class="owl-lazy" data-src="https://placehold.it/350x450&text=1" data-src-retina="https://placehold.it/350x250&text=1-retina" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x650&text=2" data-src-retina="https://placehold.it/350x250&text=2-retina" alt="">
    <picture>
      <source class="owl-lazy" media="(min-width: 650px)" data-srcset="https://placehold.it/350x250&text=3-large">
      <source class="owl-lazy" media="(min-width: 350px)" data-srcset="https://placehold.it/350x250&text=3-medium">
      <img class="owl-lazy" data-src="https://placehold.it/350x250&text=3-fallback" alt="">
    </picture>
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=4" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=5" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=6" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=7" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=8" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x400&text=9" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x400&text=10" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x450&text=11" alt="">
  </div>
  <script type="text/javascript">
  $('.owl-carousel').owlCarousel({
    items: 4,
    lazyLoad: true,
    loop: true,
    margin: 10
  });
  </script>
</body>

</html>
```

**Ví dụ 1: Áp dụng với tag img**

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

```
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<header class="entry-header owl-carousel">
	<?php
	twenty_twenty_one_post_thumbnail();
	?>
</header><!-- .entry-header -->

```

C:\xampp\htdocs\wordpress3\wp-content\themes\twentytwentyone\inc\template-tags.php

```
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;
		}
		?>
			<a class="post-thumbnail-out" href="<?php the_permalink(); ?>">
				<figure class="post-thumbnail test1_1" style="padding-bottom: <?php echo esc_attr( $bottom_padding ); ?>%;">
						<img width="<?php echo esc_attr( $thumbnail_attachment[1] ); ?>" height="<?php echo esc_attr( $thumbnail_attachment[2] ); ?>" class="mb-thumbnail owl-lazy" data-src="https://loremflickr.com/700/467" sizes="<?php echo esc_attr( $thumbnail_sizes ); ?>">
				</figure>
			</a>
			<a class="post-thumbnail-out" href="<?php the_permalink(); ?>">
				<figure class="post-thumbnail test1_1" style="padding-bottom: <?php echo esc_attr( $bottom_padding ); ?>%;">
						<img width="<?php echo esc_attr( $thumbnail_attachment[1] ); ?>" height="<?php echo esc_attr( $thumbnail_attachment[2] ); ?>" class="mb-thumbnail owl-lazy" data-src="https://loremflickr.com/700/461" sizes="<?php echo esc_attr( $thumbnail_sizes ); ?>">
				</figure>
			</a>
			<a class="post-thumbnail-out" href="<?php the_permalink(); ?>">
				<figure class="post-thumbnail test1_1" style="padding-bottom: <?php echo esc_attr( $bottom_padding ); ?>%;">
						<img width="<?php echo esc_attr( $thumbnail_attachment[1] ); ?>" height="<?php echo esc_attr( $thumbnail_attachment[2] ); ?>" class="mb-thumbnail owl-lazy" data-src="https://loremflickr.com/700/462" sizes="<?php echo esc_attr( $thumbnail_sizes ); ?>">
				</figure>
			</a>
			<a class="post-thumbnail-out" href="<?php the_permalink(); ?>">
				<figure class="post-thumbnail test1_1" style="padding-bottom: <?php echo esc_attr( $bottom_padding ); ?>%;">
						<img width="<?php echo esc_attr( $thumbnail_attachment[1] ); ?>" height="<?php echo esc_attr( $thumbnail_attachment[2] ); ?>" class="mb-thumbnail owl-lazy" data-src="https://loremflickr.com/700/463" sizes="<?php echo esc_attr( $thumbnail_sizes ); ?>">
				</figure>
			</a>
			<a class="post-thumbnail-out" href="<?php the_permalink(); ?>">
				<figure class="post-thumbnail test1_1" style="padding-bottom: <?php echo esc_attr( $bottom_padding ); ?>%;">
						<img width="<?php echo esc_attr( $thumbnail_attachment[1] ); ?>" height="<?php echo esc_attr( $thumbnail_attachment[2] ); ?>" class="mb-thumbnail owl-lazy" data-src="https://loremflickr.com/700/464" sizes="<?php echo esc_attr( $thumbnail_sizes ); ?>">
				</figure>
			</a>
			<a class="post-thumbnail-out" href="<?php the_permalink(); ?>">
				<figure class="post-thumbnail test1_1" style="padding-bottom: <?php echo esc_attr( $bottom_padding ); ?>%;">
						<img width="<?php echo esc_attr( $thumbnail_attachment[1] ); ?>" height="<?php echo esc_attr( $thumbnail_attachment[2] ); ?>" class="mb-thumbnail owl-lazy" data-src="https://loremflickr.com/700/467" sizes="<?php echo esc_attr( $thumbnail_sizes ); ?>">
				</figure>
			</a>
			<a class="post-thumbnail-out" href="<?php the_permalink(); ?>">
				<figure class="post-thumbnail test1_1" style="padding-bottom: <?php echo esc_attr( $bottom_padding ); ?>%;">
						<img width="<?php echo esc_attr( $thumbnail_attachment[1] ); ?>" height="<?php echo esc_attr( $thumbnail_attachment[2] ); ?>" class="mb-thumbnail owl-lazy" data-src="https://loremflickr.com/700/441" sizes="<?php echo esc_attr( $thumbnail_sizes ); ?>">
				</figure>
			</a>
			<a class="post-thumbnail-out" href="<?php the_permalink(); ?>">
				<figure class="post-thumbnail test1_1" style="padding-bottom: <?php echo esc_attr( $bottom_padding ); ?>%;">
						<img width="<?php echo esc_attr( $thumbnail_attachment[1] ); ?>" height="<?php echo esc_attr( $thumbnail_attachment[2] ); ?>" class="mb-thumbnail owl-lazy" data-src="https://loremflickr.com/700/432" sizes="<?php echo esc_attr( $thumbnail_sizes ); ?>">
				</figure>
			</a>
			<a class="post-thumbnail-out" href="<?php the_permalink(); ?>">
				<figure class="post-thumbnail test1_1" style="padding-bottom: <?php echo esc_attr( $bottom_padding ); ?>%;">
						<img width="<?php echo esc_attr( $thumbnail_attachment[1] ); ?>" height="<?php echo esc_attr( $thumbnail_attachment[2] ); ?>" class="mb-thumbnail owl-lazy" data-src="https://loremflickr.com/700/433" sizes="<?php echo esc_attr( $thumbnail_sizes ); ?>">
				</figure>
			</a>
			<a class="post-thumbnail-out" href="<?php the_permalink(); ?>">
				<figure class="post-thumbnail test1_1" style="padding-bottom: <?php echo esc_attr( $bottom_padding ); ?>%;">
						<img width="<?php echo esc_attr( $thumbnail_attachment[1] ); ?>" height="<?php echo esc_attr( $thumbnail_attachment[2] ); ?>" class="mb-thumbnail owl-lazy" data-src="https://loremflickr.com/700/436" sizes="<?php echo esc_attr( $thumbnail_sizes ); ?>">
				</figure>
			</a>
		<?php
	}
```

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

```
jQuery(document).ready(function($) {
  $('.entry-header').owlCarousel({
    loop: true,
    autoplay: true,
    autoplayTimeout: 5000,
    lazyLoad: true,
    nav: true,
    dots: true,
    items: 1,
    smartSpeed: 1500,
  });
});
```

**Ví dụ 2: Áp dụng không phải là thẻ img nó sẽ chuyển về dạng background**

```
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;
		}
		?>
			<a class="post-thumbnail-out" href="<?php the_permalink(); ?>">
				<figure class="post-thumbnail test1_1 owl-lazy" data-src="https://loremflickr.com/700/467"  style="padding-bottom: <?php echo esc_attr( $bottom_padding ); ?>%;">
				</figure>
			</a>
			<a class="post-thumbnail-out" href="<?php the_permalink(); ?>">
				<figure class="post-thumbnail test1_1 owl-lazy" data-src="https://loremflickr.com/700/467"  style="padding-bottom: <?php echo esc_attr( $bottom_padding ); ?>%;">
				</figure>
			</a>
			<a class="post-thumbnail-out" href="<?php the_permalink(); ?>">
				<figure class="post-thumbnail test1_1 owl-lazy" data-src="https://loremflickr.com/700/467"  style="padding-bottom: <?php echo esc_attr( $bottom_padding ); ?>%;">
				</figure>
			</a>
			<a class="post-thumbnail-out" href="<?php the_permalink(); ?>">
				<figure class="post-thumbnail test1_1 owl-lazy" data-src="https://loremflickr.com/700/467"  style="padding-bottom: <?php echo esc_attr( $bottom_padding ); ?>%;">
				</figure>
			</a>
			<a class="post-thumbnail-out" href="<?php the_permalink(); ?>">
				<figure class="post-thumbnail test1_1 owl-lazy" data-src="https://loremflickr.com/700/467"  style="padding-bottom: <?php echo esc_attr( $bottom_padding ); ?>%;">
				</figure>
			</a>
			<a class="post-thumbnail-out" href="<?php the_permalink(); ?>">
				<figure class="post-thumbnail test1_1 owl-lazy" data-src="https://loremflickr.com/700/467"  style="padding-bottom: <?php echo esc_attr( $bottom_padding ); ?>%;">
				</figure>
			</a>
			<a class="post-thumbnail-out" href="<?php the_permalink(); ?>">
				<figure class="post-thumbnail test1_1 owl-lazy" data-src="https://loremflickr.com/700/467"  style="padding-bottom: <?php echo esc_attr( $bottom_padding ); ?>%;">
				</figure>
			</a>
			<a class="post-thumbnail-out" href="<?php the_permalink(); ?>">
				<figure class="post-thumbnail test1_1 owl-lazy" data-src="https://loremflickr.com/700/467"  style="padding-bottom: <?php echo esc_attr( $bottom_padding ); ?>%;">
				</figure>
			</a>
		<?php
	}
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://javascriptuse.gitbook.io/advanced/javascript/lazy-load-voi-owl.carousel.js-ok.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.
