[LAZY] jQuery.Lazy và tạo background-loading cực chất (ok)

http://jquery.eisbehr.de/lazy/example_basic-usage

5KB

jquery.lazy.min.js

Open

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

<header class="entry-header test1">
	<?php
	twenty_twenty_one_post_thumbnail();
	?>
</header><!-- .entry-header -->

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;
		}
		?>
			<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 lazy-img" data-src="<?php echo $thumbnail_url; ?>" data-srcset="<?php echo esc_attr( $thumbnail_srcset ); ?>" sizes="<?php echo esc_attr( $thumbnail_sizes ); ?>">
				</figure>
			</a>
			<img class="abcd lazy-img" data-src="https://loremflickr.com/700/467" alt="467">
		  <img class="abcd lazy-img" data-src="https://loremflickr.com/700/468" alt="467">
		  <img class="abcd lazy-img" data-src="https://loremflickr.com/700/469" alt="467">
		  <img class="abcd lazy-img" data-src="https://loremflickr.com/700/465" alt="467">
		  <img class="abcd lazy-img" data-src="https://loremflickr.com/700/464" alt="467">
		  <img class="abcd lazy-img" data-src="https://loremflickr.com/700/463" alt="467">
		  <img class="abcd lazy-img" data-src="https://loremflickr.com/700/462" alt="467">
		  <img class="abcd lazy-img" data-src="https://loremflickr.com/700/467" alt="467">
		  <img class="abcd lazy-img" data-src="https://loremflickr.com/700/468" alt="467">
		  <img class="abcd lazy-img" data-src="https://loremflickr.com/700/469" alt="467">
		  <img class="abcd lazy-img" data-src="https://loremflickr.com/700/465" alt="467">
		  <img class="abcd lazy-img" data-src="https://loremflickr.com/700/464" alt="467">
		  <img class="abcd lazy-img" data-src="https://loremflickr.com/700/463" alt="467">
		  <img class="abcd lazy-img" data-src="https://loremflickr.com/700/462" alt="467">
		  <img class="abcd lazy-img" data-src="https://loremflickr.com/700/467" alt="467">
		  <img class="abcd lazy-img" data-src="https://loremflickr.com/700/468" alt="467">
		  <img class="abcd lazy-img" data-src="https://loremflickr.com/700/469" alt="467">
		  <img class="abcd lazy-img" data-src="https://loremflickr.com/700/465" alt="467">
		  <img class="abcd lazy-img" data-src="https://loremflickr.com/700/464" alt="467">
		  <img class="abcd lazy-img" data-src="https://loremflickr.com/700/463" alt="467">
		  <img class="abcd lazy-img" data-src="https://loremflickr.com/700/462" alt="467">
		<?php
	}

Hoặc chúng ta dùng mã sau để test

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 lazy-img" 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 lazy-img" 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 lazy-img" 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 lazy-img" 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 lazy-img" 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 lazy-img" 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 lazy-img" 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 lazy-img" 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 lazy-img" 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 lazy-img" data-src="https://loremflickr.com/700/436" sizes="<?php echo esc_attr( $thumbnail_sizes ); ?>">
				</figure>
			</a>
		<?php
	}

Ví dụ 1: Cơ bản

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://code.jquery.com/jquery.js"></script>
  <script type="text/javascript" src="jquery.lazy.min.js"></script>
  <title>Document</title>
  <style type="text/css">
  img.lazy {
    width: 700px;
    height: 467px;
    display: block;
  }
  </style>
</head>

<body>
  <img class="lazy" data-src="https://loremflickr.com/700/467" alt="467">
  <img class="lazy" data-src="https://loremflickr.com/700/468" alt="467">
  <img class="lazy" data-src="https://loremflickr.com/700/469" alt="467">
  <img class="lazy" data-src="https://loremflickr.com/700/465" alt="467">
  <img class="lazy" data-src="https://loremflickr.com/700/464" alt="467">
  <img class="lazy" data-src="https://loremflickr.com/700/463" alt="467">
  <img class="lazy" data-src="https://loremflickr.com/700/462" alt="467">
  <script type="text/javascript">
  jQuery(document).ready(function($) {
    $(function() {
      $('.lazy').lazy();
    });
  });
  </script>
</body>

</html>

Ví dụ 2: Ví dụ tạo hình ảnh load mờ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://code.jquery.com/jquery.js"></script>
  <script type="text/javascript" src="jquery.lazy.min.js"></script>
  <title>Document</title>
  <style type="text/css">
  @keyframes background-loading {
    from {
      background-position: -10000% 0, 0 0;
    }
    to {
      background-position: 10000% 0, 0 0;
    }
  }
  .post-thumbnail {
    position: relative;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }
  figure.image-container {
    display: block;
    position: relative;
    height: 0;
    -webkit-animation-name: background-loading;
    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;
  }
  figure.image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: none;
  }
  </style>
</head>
<body>
  <div class="post-thumbnail">
    <a href="http://localhost/wordpress4/2018/12/20/taking-pictures-while-travelling-places/">
      <figure class="image-container" style="padding-bottom: 73.2422%;">
        <img width="1024" height="750" alt="Taking pictures while travelling places" class="mb-thumbnail" sizes="(max-width: 1024px) 100vw, 1024px" src="http://localhost/wordpress4/wp-content/uploads/2018/12/woman-wearing-knitted-top-1139797.jpg" srcset="http://localhost/wordpress4/wp-content/uploads/2018/12/woman-wearing-knitted-top-1139797.jpg 1024w, http://localhost/wordpress4/wp-content/uploads/2018/12/woman-wearing-knitted-top-1139797-300x220.jpg 300w, http://localhost/wordpress4/wp-content/uploads/2018/12/woman-wearing-knitted-top-1139797-768x563.jpg 768w">
      </figure>
    </a>
  </div>
  <script type="text/javascript">
  jQuery(document).ready(function($) {
    $(function() {
      $('.lazy').lazy();
    });
  });
  </script>
</body>
</html>