跨境电商
经验交流分享

在Magento中应用Nivo Slider遇到的一个小问题

Nivo Slider是一个非常优秀的jQuery幻灯片插件,从前端UI的精致和配置的简便性来说,都比其它jQuery插件好上许多。今天在一个Magento 1.4升级1.7的项目中,需要为客户更换一个可控性更高的幻灯片。之前很多Magento项目中都使用了Nivo Slider作为幻灯片解决方案,这次也没理由更换。

在页面完全读取之后,一切显示正常,然而仔细观察的话,在页面未读取完成之前,幻灯片中的几张图片会全部显示出来,页面的显示错乱。导致该问题出现的一个主要原因是Nivo Slider是在页面完全读取结束之后执行的,而非DOM的读取完成。在配置中,我们可以看到如下代码。

[javascript]
<script type="text/javascript">
jQuern.noConflict();
jQuery(window).load(function() {
jQuery(‘#ruiwant-home-slider’).nivoSlider();
});
</script>
[/javascript]

在一般的页面中,数据及图片相对较少,读取的速度非常快,所以感觉不到这种瞬间的延迟。然而对于Magento来说,包括幻灯片,banner和产品图片等构成的首页可能会非常大,这种延迟会导致上面提到的问题。解决方式非常简单,我们给最外层的wrapper,设置固定的高度和宽度,并且添加overflow:hidden的属性即可。

赞(0)
未经允许不得转载:锐想 » 在Magento中应用Nivo Slider遇到的一个小问题
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

锐想电商 - 跨境电商经验交流分享

锐想无限