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.jsNextShow half of the other item on Owl Carousel vinmec.com items: 1.5 (ok)
Last updated
