Tạo hiệu ứng load ảnh và hover vào ảnh khi sử dụng plugin lazysize
Sử dụng lazyload tải ảnh trong blogspot giúp tăng hiệu suất trang, trang tải nhanh thân thiện với mobile và cách 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>
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>