jquery - 为什么magento安装的scriptaculous中的effects.js与Mike Tuupola的lazy-load jquery插件冲突

Question

我已经覆盖了基本默认的 page.xml，包括:jquery 延迟加载插件作为 head 部分中的第一个 jquery 脚本。然后紧接着，我有一个 no_conflict.js，其中只包含:

var $jq191= jQuery.noConflict();

然后page.xml包含所有其他javascript框架，例如prototype和effects.js、dragdrop.js等。

现在我最初实现我的网站时没有使用 magento，而是使用延迟加载插件。使用延迟加载插件，我在图像加载时添加了淡入效果。没有magento也能正常工作，一旦我添加了magento，当图像淡入时就会出现可怕的闪烁，这种情况只发生在谷歌浏览器中。因为我知道magento会发生这种情况，所以我一一删除了magento中包含的脚本，发现一旦删除effects.js，问题就解决了。

Effects.js 很难理解，而且我是 jquery/javascript 的新手，所以我想知道是否有人可以阐明这个问题。任何帮助将不胜感激。谢谢。

来自 page.xml:

<block type="page/html_head" name="head" as="head">
            <action method="addJs"><script>jquery/jquery-1.9.1.min.js</script></action>
            <action method="addJs"><script>jquery/no_conflict.js</script></action>
            <action method="addJs"><script>prototype/prototype.js</script></action>
            <action method="addJs"><script>lib/ccard.js</script></action>
            <action method="addJs"><script>prototype/validation.js</script></action>
            <action method="addJs"><script>scriptaculous/builder.js</script></action>
            <action method="addJs"><script>scriptaculous/effects.js</script></action>
            <action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
            <action method="addJs"><script>scriptaculous/controls.js</script></action>
            <action method="addJs"><script>scriptaculous/slider.js</script></action>
            <action method="addJs"><script>varien/js.js</script></action>
            <action method="addJs"><script>varien/form.js</script></action>
            <action method="addJs"><script>varien/menu.js</script></action>
            <action method="addJs"><script>mage/translate.js</script></action>
            <action method="addJs"><script>mage/cookies.js</script></action>

            <block type="page/js_cookie" name="js_cookies" template="page/js/cookie.phtml"/>

            <action method="addCss"><stylesheet>css/styles.css</stylesheet></action>
            <action method="addItem"><type>skin_css</type><name>css/styles-ie.css</name><params/><if>lt IE 8</if></action>
            <action method="addCss"><stylesheet>css/widgets.css</stylesheet></action>
            <action method="addCss"><stylesheet>css/print.css</stylesheet><params>media="print"</params></action>

            <action method="addItem"><type>js</type><name>lib/ds-sleight.js</name><params/><if>lt IE 7</if></action>
            <action method="addItem"><type>skin_js</type><name>js/ie6.js</name><params/><if>lt IE 7</if></action>
        </block>

来自 no_conflict.js:

var $jq191= jQuery.noConflict();

来自 local.xml:

<?xml version="1.0"?>
    <layout>
    <default>
    <reference name="head">
        <action method="addItem">
            <type>skin_js</type>
            <name>js/jquery.lazyload.js</name>
        </action>
        <action method="addItem">
            <type>skin_js</type>
            <name>js/loadlazy.js</name>
        </action>
        <action method="addItem">
            <type>skin_js</type>
            <name>js/vendor/bootstrap.min.js</name>
        </action>
        <action method="addItem">
            <type>skin_js</type>
            <name>js/jquery.fancybox.pack.js</name>
        </action>
        <action method="addItem">
            <type>skin_js</type>
            <name>js/jquery.fancybox-media.js</name>
        </action>
        <action method="addItem">
            <type>skin_js</type>
            <name>js/vendor/modernizr-2.6.2-respond-1.1.0.min.js</name>
        </action>
        <action method="addCss"><stylesheet>css/jquery.fancybox.css</stylesheet></action>
    </reference>
    </default>
    </layout>

来自 loadlazy.js:

$jq191(document).ready( function( evt ){

$jq191("img.lazy").lazyload({effect: "fadeIn"});
$jq191(".product-popup").fancybox({
    maxWidth    : 800,
    maxHeight   : 600,
    fitToView   : false,
    width       : '70%',
    height      : '70%',
    autoSize    : false,
    closeClick  : false,
    openEffect  : 'none',
    closeEffect : 'none',
    type: 'iframe',
    helpers : { overlay : { locked : false,
                 } }
});
});

来自附件.phtml:

只需在 img 标签上将类设置为“lazy”:

 <img style="display: block; position:absolute; top: 50%; left:50%; 
                                                            margin-left:<?php echo strval(-1*intval( $this->helper('catalog/image')->init($_product, 'image')->getOriginalWidth())/2); ?>px; 
                                                            margin-top:<?php echo strval(-1*intval($this->helper('catalog/image')->init($_product, 'image')->getOriginalHeight())/2); ?>px" 
                                                            class="lazy" id="lazy.images#<?php echo $_iterator; ?>"
                                                            src="<?php echo $this->getSkinUrl("img/product-placeholder.png"); ?>"
                                                            data-original="<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>" 
                                                            height="<?php echo $this->helper('catalog/image')->init($_product, 'image')->getOriginalHeight(); ?>" 
                                                            width="<?php echo $this->helper('catalog/image')->init($_product, 'image')->getOriginalWidth(); ?>" 
                                                            alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'image'), null, true); ?>" />

Answer 1

好的，问题就在这里 - 我将为您提供一些解决方案

jquery.lazyload.js

触发一个名为“appear”的事件 - 由于 jQuery trigger() 方法的编写方式，它将尝试触发元素上的方法并触发事件。 Scriptaculous 中的 Effects 方法将 appear() 方法添加到 Element 原型(prototype)。 Scriptaculous appear() 以及延迟加载 fadeIn() 都会触发，这就是当 2 个方法尝试更改元素的不透明度时出现闪烁的情况。同一时间。

轻松修复

在您的effects.js 副本中，最后一行是

Element.addMethods(Effect.Methods);

如果删除该行，它将从 Element 原型(prototype)中删除 Scriptaculous Effects 方法，并且应该可以解决眼前的问题。但是，如果任何其他插件依赖于 Element 原型(prototype)上的 Effects 方法，它们将开始失败。但如果您正在使用这些方法，您可以将它们更改为使用匿名方法。即

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

硬修复

在您的副本中

jquery.lazyload.js

查找出现事件的“appear”触发器和 observe()/on() 并将事件名称更改为其他名称 - 这将需要更多调试因为第一次可能不起作用。还要确保找到所有实例，以便所有内容都发生更改。