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

https://owlcarousel2.github.io/OwlCarousel2/demos/lazyLoad.html

<!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
	}

PreviousCách xây dựng một Full Screen Carousel với Owl.js NextShow half of the other item on Owl Carousel vinmec.com items: 1.5 (ok)

Last updated 3 years ago

Was this helpful?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <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>

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 }