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

![](https://2494213435-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYjAG13rAPdbArSfRyB%2Fuploads%2FTfv2hi0LcWpkHLnxQa5k%2FScreenshot_6.png?alt=media\&token=b84b9092-d4e3-4dd7-811a-82aa4629b2dc)

![](https://2494213435-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYjAG13rAPdbArSfRyB%2Fuploads%2F1lSTrREN7594wvf2ffL6%2FScreenshot_7.png?alt=media\&token=de7ff768-cea3-45ce-b902-31291e58379f)

```
<!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: 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/advanced/javascript/lazy-load-voi-owl.carousel.js-ok.md?ask=<question>
```

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.
