Tăng tốc độ Load Website Blogspot khi sử dụng Code Load ảnh tuần tự và mượt mà

Nhiều khi nội dụng Website của bạn quá dài, nhiều hình ảnh cho quá cho Blospot, làm cho blogspot load chậm hơn, làm người dùng cảm thấy khó chịu khi sử vào Web. Blog Sơn Pro đã sử dụng đoạn Code nhằm tăng tốc độ Blogspot bằng cách khi bạn xem đến đâu thì Blogspot load ảnh đến đó. Với cách này sẽ làm tăng tốc độ load Blogspot của bạn.

TĂNG TỐC ĐỘ LOAD WEBSITE BLOGSPOT

Chèn đoạn Code sau vào trước thẻ đóng </body> 

<script type='text/javascript'>
//<![CDATA[
(function($) { $.fn.lazyload = function(options) { var settings = { threshold : 0, failurelimit : 0, event : "scroll", effect : "show", container : window }; if(options) { $.extend(settings, options); } var elements = this; if ("scroll" == settings.event) { $(settings.container).bind("scroll", function(event) { var counter = 0; elements.each(function() { if ($.abovethetop(this, settings) || $.leftofbegin(this, settings)) { /* Nothing. */ } else if (!$.belowthefold(this, settings) && !$.rightoffold(this, settings)) { $(this).trigger("appear"); } else { if (counter++ > settings.failurelimit) { return false; } } }); var temp = $.grep(elements, function(element) { return !element.loaded; }); elements = $(temp); }); } this.each(function() { var self = this; if (undefined == $(self).attr("original")) { $(self).attr("original", $(self).attr("src")); } if ("scroll" != settings.event || undefined == $(self).attr("src") || settings.placeholder == $(self).attr("src") || ($.abovethetop(self, settings) || $.leftofbegin(self, settings) || $.belowthefold(self, settings) || $.rightoffold(self, settings) )) { if (settings.placeholder) { $(self).attr("src", settings.placeholder); } else { $(self).removeAttr("src"); } self.loaded = false; } else { self.loaded = true; } $(self).one("appear", function() { if (!this.loaded) { $("<img />") .bind("load", function() { $(self) .hide() .attr("src", $(self).attr("original")) [settings.effect](settings.effectspeed); self.loaded = true; }) .attr("src", $(self).attr("original")); }; }); if ("scroll" != settings.event) { $(self).bind(settings.event, function(event) { if (!self.loaded) { $(self).trigger("appear"); } }); } }); $(settings.container).trigger(settings.event); return this; }; $.belowthefold = function(element, settings) { if (settings.container === undefined || settings.container === window) { var fold = $(window).height() + $(window).scrollTop(); } else { var fold = $(settings.container).offset().top + $(settings.container).height(); } return fold <= $(element).offset().top - settings.threshold; }; $.rightoffold = function(element, settings) { if (settings.container === undefined || settings.container === window) { var fold = $(window).width() + $(window).scrollLeft(); } else { var fold = $(settings.container).offset().left + $(settings.container).width(); } return fold <= $(element).offset().left - settings.threshold; }; $.abovethetop = function(element, settings) { if (settings.container === undefined || settings.container === window) { var fold = $(window).scrollTop(); } else { var fold = $(settings.container).offset().top; } return fold >= $(element).offset().top + settings.threshold + $(element).height(); }; $.leftofbegin = function(element, settings) { if (settings.container === undefined || settings.container === window) { var fold = $(window).scrollLeft(); } else { var fold = $(settings.container).offset().left; } return fold >= $(element).offset().left + settings.threshold + $(element).width(); }; $.extend($.expr[':'], { "below-the-fold" : "$.belowthefold(a, {threshold : 0, container: window})", "above-the-fold" : "!$.belowthefold(a, {threshold : 0, container: window})", "right-of-fold" : "$.rightoffold(a, {threshold : 0, container: window})", "left-of-fold" : "!$.rightoffold(a, {threshold : 0, container: window})" }); })(jQuery);//]]>
</script>
<script type='text/javascript'>
$(function() { $(&quot;img&quot;) .lazyload({ placeholder : &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvDjmQ38VFkolsjR-7NBEBgL3HaMBBg0RJs-0cAO6JsjgTqwzXKKh1nZTri218hjeXS1FCZ64wMNUExtODgvmI8a01_mMUWOmeIt-b60VJklFp2SJ9QfvFsSDOsXy6Q97mgIvvOrmVOKE/s1600/logo-sun-grand-city-ancora.png&quot;, effect: &quot;fadeIn&quot; }); });</script>

Lưu ý: Thay link ảnh dưới bẳng ảnh bạn muốn hiển thị lúc load chờ

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvDjmQ38VFkolsjR-7NBEBgL3HaMBBg0RJs-0cAO6JsjgTqwzXKKh1nZTri218hjeXS1FCZ64wMNUExtODgvmI8a01_mMUWOmeIt-b60VJklFp2SJ9QfvFsSDOsXy6Q97mgIvvOrmVOKE/s1600/logo-sun-grand-city-ancora.png

Hãy kiểm trại lại và xem thành quả của mình nhé.

Key: cách tăng tốc độ load blogspot, tăng tốc độ load web nhanh hơn, làm tăng tốc độ load nhanh hơn