magento effects.js jquery.lazyload.js 冲突

2019独角兽企业重金招聘Python工程师标准>>>

当这两个js并存时，会造成加载图片闪烁的冲突问题

原因：
jquery.lazyload.js会触发叫"appear"的显示效果，利用jQuery trigger()方法影响图片元素
effects.js中给元素模型添加了appear()方法
这样两个方法同时影响元素，改变透明度，就会造成闪烁

解决：
1.注释effects.js最后一句Element.addMethods(Effect.Methods);
或者改变Effect.Methods，去掉appear()
2.jquery.lazyload.js 替换appear为其他名字

原文
jquery.lazyload.js triggers an event called “appear” to show the effect and because of the way the jQuery trigger() method is written it will try and trigger a method on the element as well as trigger the event. The Effects methods in Scriptaculous add an appear() method to the Element prototype. The Scriptaculous appear() is firing as well as the lazyload fadeIn() and thats were you get a flicker when 2 methods are trying to change the opacity of the element at the same time.

How to fix it:
First Method
/root/js/scriptaculous/effects.js
In your copy of effects.js the last line is

Element.addMethods(Effect.Methods);

If you remove that line it will remove the Scriptaculous Effects methods from the Element prototype and should fix the immediate problem. However if any other plugins are depending on the Effects methods on the Element prototype they will start failing. But if you are using those methods you can change them over to use the anonymous methods. ie

$(‘myelement’).appear();
// changes to
Effect.Appear(‘myelement’);

Second method, i think this the easiest and secure way to remove the conflict and this method also not effect any existing effects.
In your copy of jquery.lazyload.js just replace the “appear” key word with appear1 or any other word, save file and enjoy the lazy load plugin.//成功解决

转载于:https://my.oschina.net/liufeng815/blog/389311