Lazy Load cho template blogspot, tăng tốc tải trang hiệu quả với 1 số ví dụ thực tiễn như: sử dụng lazy load của flatsome, sử dụng lazysize, v.v...
Đoạn script lazy load của Flatsome 3.7.2
jQuery(document).ready(function($) {
'use strict';
;(function () {
function createObserver (handler) {
return new IntersectionObserver(function (entries) {
for (var i = 0; i < entries.length; i++) {
handler(entries[i])
}
}, {
rootMargin: '0px',
threshold: 0.1
})
}
Flatsome.behavior('lazy-load-images', {
attach: function (context) {
var observer = createObserver(function (entry) {
if (entry.intersectionRatio > 0) {
observer.unobserve(entry.target)
var $el = jQuery(entry.target)
var src = $el.data('src')
var srcset = $el.data('srcset')
if ($el.hasClass('lazy-load-active')) return
else $el.addClass('lazy-load-active')
if (src) $el.attr('src', src)
if (srcset) $el.attr('srcset', srcset)
$el.imagesLoaded(function () {
$el.removeClass('lazy-load')
$el.removeClass('lazy-load--base64')
})
}
})
jQuery('.lazy-load', context).each(function (i, el) {
observer.observe(el)
})
}
})
Flatsome.behavior('lazy-load-sliders', {
attach: function (context) {
var observer = createObserver(function (entry) {
if (entry.intersectionRatio > 0) {
observer.unobserve(entry.target)
var $el = jQuery(entry.target)
if ($el.hasClass('slider-lazy-load-active')) return
else $el.addClass('slider-lazy-load-active')
$el.imagesLoaded(function () {
if ($el.hasClass('flickity-enabled')) {
$el.flickity('resize')
}
})
}
})
jQuery('.slider', context).each(function (i, el) {
observer.observe(el)
})
}
})
Flatsome.behavior('lazy-load-packery', {
attach: function (context) {
var observer = createObserver(function (entry) {
if (entry.intersectionRatio > 0) {
observer.unobserve(entry.target)
var $el = jQuery(entry.target)
$el.imagesLoaded(function () {
jQuery('.has-packery').packery('layout') // why global selector?
})
}
})
jQuery('.has-packery .lazy-load', context).each(function (i, el) {
observer.observe(el)
})
}
})
})()
});
