Lazy Load cho template blogspot, tăng tốc tải trang hiệu quả

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...

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)
})
}
})
})()
});
Xem thêm
Giá bán: thu-thuat-blogspot
Không mã hóa code Không bản quyền chân trang Hỗ trợ cài đặt và chỉnh sửa Nâng cấp template miễn phí khi có bản mới Bảo hành trọn đời Hỗ trợ thêm widget cơ bản Cam kết giá rẻ nhất thị trường không đâu rẻ bằng, dịch vụ hỗ trợ trọn đời cao cấp nhiệt tình nhất, code chuẩn (new)
Mua ngay

Nhận xét