I have overridden the base default's page.xml, to include:
the jquery lazy load plugin as the first jquery script in the head section.
then immediately following that, i have a no_conflict.js that just contains:
var $jq191= jQuery.noConflict();
then page.xml has all the other javascript frameworks, like prototype and effects.js, dragdrop.js, etc.
Now I had originally implemented my site without magento, and using the lazy load plugin. with the lazy load plugin, I added a fadein effect when images load. it works fine without magento,
once I added magento, there was a terrible flicker when the images faded in, that only happened in google chrome. since i knew this happened with magento, I removed scripts included from magento one by one, and found out, that once I removed effects.js, the problem was solved.
Effects.js is a lot to swallow, and I'm new to jquery/javascript, so I was wondering if someone could shed some light on this issue. any help, would be greatly appreciated. thank you.
from 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>
from no_conflict.js:
var $jq191= jQuery.noConflict();
from 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>
from 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,
} }
});
});
from accessories.phtml:
just setting class to "lazy" on img tags:
<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); ?>" />