1

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

var $jq191= jQuery.noConflict();

然后 page.xml 拥有所有其他的 javascript 框架，如原型和 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 标签上将 class 设置为“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); ?>" />
4

1 回答 1

3

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

jquery.lazyload.js

触发一个名为“出现”的事件 - 由于 jQuerytrigger()方法的编写方式，它会尝试触发元素上的方法并触发事件。Scriptaculous 中的 Effects 方法appear()向 Element 原型添加了一个方法。Scriptaculousappear()和lazyload 一样在触发，fadeIn()当两种方法同时尝试更改元素的不透明度时，您会出现闪烁。

轻松修复

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

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');

Hard Fix

In your copy of 

jquery.lazyload.js

Look for the "appear" trigger and observe()/on() of the appear event and change the event name to something else - this will require more debugging as it might not work the first time. Also make sure you find all of the instances so everything is changed.

于 2013-04-01T15:16:59.087 回答