Tạo hiệu ứng load ảnh và hover vào ảnh khi sử dụng plugin lazysize

Hiện nay đa số các trang web đều có sử dụng lazyload để trì hoãn tải ảnh. Rất nhiều plugin được các nhà phát triển web tạo ra hỗ trợ tải ảnh trong đó mình đang áp dụng cho blog của mình plugin lazysize vì được Google khuyên dùng.

Bài này mình không hướng dẫn các bạn áp dụng lazyload vào blogspot như thế nào, điều mà mình nhấn mạnh nếu bạn đã áp dụng lazyload rồi bạn có thể tạo hiệu ứng load ảnh và hover vào ảnh. Cụ thể, khi trang web tải mà ảnh chưa được tải vì đợi trang web tải xong các thứ quan trọng khác hay khi scroll trình duyệt xuống dưới mà các ảnh bên dưới chưa được tải. Việc của bạn là tạo được cái khung ảnh cố định như hình dưới đây:

Cố định khung ảnh khi ảnh chưa được tải

Ngoài ra khi ảnh đã được tải hiển thị rồi nếu trên desktop khi bạn dùng chuột hover vào ảnh, ảnh sẽ được phóng to lên theo tỷ lệ tùy chỉnh như hình dưới đây:

Ảnh được phóng to 5% khi hover

Phương pháp thực hiện áp dụng trong Blogger và cho cả widget Blog version='1' và version='2'

Bước 1: Tạo element cho ảnh

+ widget Blog version='1'

<div class='post_thumb'>

  <a class='img' expr:href='data:post.link ? data:post.link : data:post.url' expr:title='data:post.title'>

    <b:if cond='data:post.firstImageUrl'>

      <b:class name='has--img'/>

      <img class='lazyload' expr:alt='data:post.title' expr:data-src='data:post.firstImageUrl' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>

    <b:else/>

      <b:class name='no--img'/>

    </b:if>

  </a>

</div>

+ widget Blog version='2'

<div class='post_thumb'>

  <a class='img' expr:href='data:post.link ? data:post.link : data:post.url' expr:title='data:post.title'>

    <b:if cond='data:post.featuredImage.isYouTube or data:post.featuredImage'><b:class name='has--img'/></b:if>

    <b:if cond='!data:post.featuredImage.isYouTube and !data:post.featuredImage'><b:class name='no--img'/></b:if>

    <b:if cond='data:post.featuredImage.isYouTube'>

      <img class='lazyload' expr:alt='data:post.title' expr:data-src='data:view.featuredImage.youtubeMaxResDefaultUrl' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>

    <b:elseif cond='data:post.featuredImage'/>

      <img class='lazyload' expr:alt='data:post.title' expr:data-src='data:post.featuredImage' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>

    </b:if>

  </a>

</div>

Tham khảo thêm: Thiết kế các bài đăng trên Blog hiển thị tại nhóm trang chỉ mục

Bước 2: Chèn script và plugin lazysize trước thẻ đóng </body>

<script>//<![CDATA[

window.addEventListener('load',function(){

  if(navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|Windows Phone|webOS)/i)===null

  ||window.navigator.pointerEnabled&&navigator.maxTouchPoints>1)document.documentElement.setAttribute('data-view-type','desktop')

  else document.documentElement.setAttribute('data-view-type','mobile')

})

//]]></script>

<script asysn='asysn' defer='defer' src='https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.2/lazysizes.min.js'></script>

Bước 3: Chèn css trước thẻ đóng </head>

<b:tag name='style'>/* <![CDATA[ */

.post_thumb{float:left;width:35%;position:relative;border-radius:3px;overflow:hidden}

a.img{display:-ms-flexbox;display:-webkit-flex;display:flex;position:relative;padding-bottom:66.67%;width:100%;height:100%;color:inherit}

a.no--img{border:1px solid #dee2e6}

a.has--img>img{position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-webkit-animation:fadeInImages 0.5s ease;animation: fadeInImages 0.5s ease}

a.img::after{background:#e9ecef;position:absolute;top:0;left:0;width:100%;height:100%}

a.img:not(.no--img)::after{content:''}

a.no--img::after{content:'Không có ảnh';display:-ms-flexbox;display:-webkit-flex;display:flex;justify-content:center;align-items:center;text-transform:uppercase;font-size:11px;color:#212529}

[data-view-type=desktop] a.img{transition:transform .5s ease-out .1s}

[data-view-type=desktop] a.img:hover{-webkit-transform:scale(1.05);-moz-transform:scale(1.05);-ms-transform:scale(1.05);-o-transform:scale(1.05);transform:scale(1.05)}

@-webkit-keyframes fadeInImages{0%{opacity:0}to{opacity:1}}

@keyframes fadeInImages{0%{opacity:0}to{opacity:1}}

/* ]]> */</b:tag>

Các bài viết liên quan đến ảnh trong blogspot

• Chia sẻ một vài kinh nghiệm giúp bạn tối ưu Blog tải nhanh hơn
• Tìm hiểu thuộc tính 'width, 'height' của thẻ dữ liệu hình ảnh bài viết blogspot
• Hai phương pháp hay giúp tối ưu pagespeed cho trang bài viết blogspot
• Sử dụng định dạng ảnh WebP để giảm kích thước trang và cải thiện hiệu suất
• Thiết lập kích thước ảnh khi tải trang phù hợp với kích thước màn hình
• Thêm thuộc tính lazy loading trì hoản tải ảnh và iframe cho trang blogspot
• Thẻ dữ liệu hình ảnh trong tiện ích Bài đăng trên Blog version 2