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ả
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)

})

}

})

})()

});

Đăng bởi : Doan Nguyen Lazy Load cho template blogspot, tăng tốc tải trang hiệu quả Đánh giá: 9.1 / 10

0 Nhận xét
NEWSLETTER

Nhập email của bạn để nhận cập nhật mẫu mới qua Email

Blog
    Liên hệ quảng cáo