使用延迟加载jquery插件(由mika tuupola)与magento,fadein效果动画闪烁

时间:2013-03-29 14:32:17

标签: jquery magento twitter-bootstrap lazy-loading

我正在使用Mika Tuupola的jquery插件和Magento CE 1.7.x.我在产品图像上使用了fadein动画效果,通过将类设置为lazy for the images,然后调用$ jq191(img.lazy).lazyload();.另外,我正在使用jquery与var $ jq191 = jQuery.noConflict()的冲突模式。我不知道问题出在哪里,或者在这个问题中粘贴了什么代码。我希望有人遇到过这个问题,也许可以借鉴他们的经验。图像位于嵌套在ul标签中的li标签中的锚内。我也在使用twitter bootstrap。我只用bootstrap尝试了插件,它工作正常。但是,当我添加magento混合时,它会导致谷歌Chrome和Firefox的闪烁。它在Internet Explorer中运行良好,但即使在Internet Explorer中,它也会显示从右到左移动的白色闪光,但淡入淡出本身也很流畅。

解<!/强> 好吧,看看在magento中加载了哪些脚本可能导致问题。它看起来像script.aculo.us effects.js与jquery延迟加载插件冲突。我不明白为什么会这样,因为延迟加载插件是自包含的,具有自己的范围,因此它不会污染全局命名空间。我删除了effects.js,闪烁停止了。我必须通过lazyload查看为什么它这样做。如果有人想解释,请欣赏它,谢谢。

2 个答案:

答案 0 :(得分:2)

由于lazyload内部使用appear事件与来自Effect.Appear的{​​{1}}之间存在冲突。

可以通过在scriptaculous脚本中将"appear"的所有出现替换为另一个自由值(例如,"lazyappear")来解决。

答案 1 :(得分:0)

上面的答案修正了一些捣蛋鬼,但并不完全。 此问题与此问题相关:https://bugs.chromium.org/p/chromium/issues/detail?id=580634