1

基本デフォルトの page.xml をオーバーライドして、以下を含めました: jquery 遅延読み込みプラグインを head セクションの最初の jquery スクリプトとして。その直後に、次のものを含む no_conflict.js があります。

var $jq191= jQuery.noConflict();

次に、page.xml には、prototype、effects.js、dragdrop.js などの他のすべての JavaScript フレームワークがあります。

今、私はもともとマジェントなしで、遅延読み込みプラグインを使用して自分のサイトを実装していました。遅延読み込みプラグインを使用して、画像の読み込み時にフェードイン効果を追加しました。マジェントがなくても問題なく動作します.マジェントを追加すると、画像がフェードインしたときにひどいちらつきがありました.これはGoogle Chromeでのみ発生しました. これがmagentoで起こることを知っていたので、magentoに含まれているスクリプトを1つずつ削除し、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); ?>" />
4

1 に答える 1

3

OK、ここに問題があります。問題の解決策をいくつかご紹介します。

jquery.lazyload.js

「appear」というイベントをトリガーします。jQuerytrigger()メソッドの記述方法により、要素のメソッドをトリガーしてイベントをトリガーしようとします。Scriptaculous の Effects メソッドはappear()、Element プロトタイプにメソッドを追加します。Scriptaculousappear()は遅延ロードと同様に起動しておりfadeIn()、2 つのメソッドが要素の不透明度を同時に変更しようとするとちらつきが発生します。

簡単な修正

Effects.js のコピーの最後の行は

Element.addMethods(Effect.Methods);

その行を削除すると、Element プロトタイプから Scriptaculous Effects メソッドが削除され、当面の問題が修正されるはずです。ただし、他のプラグインが Element プロトタイプの Effects メソッドに依存している場合、それらは失敗し始めます。ただし、これらのメソッドを使用している場合は、匿名メソッドを使用するように変更できます。すなわち

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

ハードフィックス

あなたのコピーで

jquery.lazyload.js

observe()「appear」トリガーおよび/またはappearイベントを探してon()、イベント名を別の名前に変更します。これには、最初は機能しない可能性があるため、さらにデバッグが必要になります。また、すべてのインスタンスを見つけて、すべてが変更されていることを確認してください。

于 2013-04-01T15:16:59.087 に答える