<script src='http://tanchau123.googlecode.com/files/lazyload.txt' type='text/javascript'/>

<!-- Lazy load --><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); } /* Fire one scroll event per scroll. Not one scroll event per image. */ 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; } } }); /* Remove image from array so it is not looped next time. */ var temp = $.grep(elements, function(element) { return !element.loaded; }); elements = $(temp); }); } this.each(function() { var self = this; /* Save original only if it is not defined in HTML. */ 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; } /* When appear is triggered load original image. */ $(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")); }; }); /* When wanted event is triggered load original image */ /* by triggering appear. */ if ("scroll" != settings.event) { $(self).bind(settings.event, function(event) { if (!self.loaded) { $(self).trigger("appear"); } }); } }); /* Force initial check if images should appear. */ $(settings.container).trigger(settings.event); return this; }; /* Convenience methods in jQuery namespace. */ /* Use as $.belowthefold(element, {threshold : 100, container : window}) */ $.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(); }; /* Custom selectors for your convenience. */ /* Use as $("img:below-the-fold").something() */ $.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" charset="utf-8"> $(function() {
$("img") // img là áp dụng với cả blog. Nếu chỉ muốn áp dụng cho một class nào đó thì thêm class đó vào trước img. Ví dụ: .post img, #content img, .comments img,…
.lazyload({ placeholder : "LINK_HÌNH", /*Hình thay thế khi ảnh chưa load xong*/ effect: "fadeIn" /* Hiệu ứng mờ khi ảnh xuất hiện. Có thể sử dụng các hiệu ứng khác như: slideUp, slideDown,…*/ });});</script>* Các tính năng thêm. Thêm vào sau dòng: effect: "fadeIn"threshhold:100 /*Số pixel của ảnh được tải trước*/container: $("class") /*Dùng cho class scroll được. Thay thành class bạn muốn áp dụng. Ví dụ: #container, #scroll, .imagescroll,…*/Ví dụ: #container, #scroll, .imagescroll,…*/

Một số mẫu hình thay thế 

         

Theo caytamgui