523
魔獸
Magento加速利器——lazyload
Magento的速度是令人頭疼的問題，我現在介紹一種前端的加速方法。說到lazyload,相信很多人都不陌生，現在很多網站都已經用到這個技術，他可以延遲加載長頁麵的圖片。對於Magento這樣的商城網站的加速就很明顯了。我今天說的這個lazyload是經過POPO改造的（強逼我給他加外連……）。下麵我放一些測試的數據，我正在做的一個網站的列表頁。
很明顯的就能看出差距。接下來寫下用法：
首先加上jQuery,lazyload兩段js。
lazyload：
(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; /* When appear is triggered load original image. */ $(self).one("appear", function() { if (!this.loaded) { $("<img alt="" />") .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})" }); $(function(){ $("img[original]").lazyload({ threshold : 200,effect: "fadeIn" }); }); })(jQuery);
然後修改圖片的路徑
例如：<img alt=”" src=”<?php echo $this->getSkinUrl(‘images/co.jpg’) ?>”/>
修改為<img alt=”" original=”<?php echo $this->getSkinUrl(‘images/co.jpg’) ?>” src=”……”/>。
後麵這個src裏的圖片是一個1像素的透明gif圖片。
這樣就可以了，有興趣的可以嚐試下。
最後更新：2017-04-02 06:51:24