首页
外贸B2C模板开发
zencart 开发
Magento开发
经典客户案例
zencart 报价
外贸主机
联系我们
 
 
首页 ::  Magento开发 ::  Magento SEO优化 ::  Magento加速利器——lazyload
 
Magento加速利器——lazyload

  作者: Magento   |   2010-10-06     阅读次数:692     关键字:莆田Magento优化


首先加上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 &lt;= $(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 &lt;= $(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 &gt;= $(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 &gt;= $(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图片。

这样就可以了。






Magento SEO优化的相关新闻


更早的新闻

 
 
 
外贸网站模板  |  关于我们  |  核心技术  |  人才招聘  |  帮助中心  |  zencart下载  |  付款方式  |  公司地图  |  联系我们


粤ICP备15004589号-1
深圳市迅捷网络技术有限公司 Copyright © 2004-2016 All Rights Reserved. 版权所有
总公司:深圳市龙华新区民治街道人民路中航天逸大厦A3栋15层     网址:www.zencart-cn.com  电话:0755-28107785
分公司:惠州市惠城区港惠新天地商业大厦2B栋19层 网址:www.0752web.com 电话:0752-2695554  2065565
全国服务热线:137 14307967   售后服务热线:159 19478387 客服QQ: 1512144 408079953 MSN:szsun@msn.com