Question

我已经覆盖了基本默认的page.xml，包括： jquery lazy load plugin作为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,
                 } }
});
});

来自accessories.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

触发一个名为“emerge”的事件 - 由于jQuery trigger()方法的编写方式，它将尝试触发元素上的方法并触发事件。 Scriptaculous中的Effects方法向Element原型添加appear()方法。 Scriptaculous appear()和lazyload fadeIn()一样被激活，当两个方法试图同时改变元素的不透明度时，你会得到一个闪烁。

轻松修复

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

Element.addMethods(Effect.Methods);

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

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

硬性修复

在您的

副本中

jquery.lazyload.js

查看出现事件的“显示”触发器和observe() / on()并将事件名称更改为其他内容 - 这将需要更多调试，因为它可能无法在第一次运行。还要确保找到所有实例，以便更改所有内容。

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

1 个答案: