Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

How to implement “Defer loading of JavaScript”
 
srshakya
Jr. Member
 
Total Posts:  22
Joined:  2010-12-11
 

Hi,

How to implement ”Defer loading of JavaScript” on magento sites.

Thanks !

 
Magento Community Magento Community
Magento Community
Magento Community
 
Magestore
Mentor
 
Avatar
Total Posts:  1015
Joined:  2009-08-07
Viet Nam
 

Hi Srshakya,
If you want to add some Javascript files to your custom theme, these following lines will be useful. As per your requirement, you need to see the layout file in which you want to call js file and simply put this line there:
<action method=”addItem”><type>skin_js</type><name>js/product.js</name></action>
Above line will try to find the product.js file under /skin/frontend/default/Your_Theme/js /product.js
Similarly, you can remove a default javascript file by putting this line in your layout file:
<action method=”removeItem”> <type>js</type> <name>varien/product.js</name> <params /> </action>
Hope this will be helpful for you.
Magestore

 
Magento Community Magento Community
Magento Community
Magento Community
 
chiefair
Mentor
 
Avatar
Total Posts:  1848
Joined:  2009-06-04
 

How to truly defer javascript loading on Magento. Magento uses the Prototype framework which has the dom:loaded function. It works far better than window.onload which often waits till all the images are loaded. Basically once the HTML has been generated, but before the rest of the content is available, insert the javascript where you need it, often just before the ending body tag.

The Prototype Framework’s already loaded up and waiting with this excellent function, use it!
The dom:loaded event observer

<!-- External Overlay Loader -->
<
script type="text/javascript">
//<![CDATA[
    
document.observe("dom:loaded", function() {
        
// load script after dom load
        
$$("body")[0].insert(new Element("script"{
          type
"text/javascript",
          
src"https://www.example.com/loader/overlay.js"
        
}));
    
});
//]]>
</script>

<!-- Internal Overlay Loader -->
<
script type="text/javascript">
//<![CDATA[
    
document.observe("dom:loaded", function() {
        
// load script after dom load
        
$$("body")[0].insert(new Element("script"{
          type
"text/javascript",
          
src"<?php echo $this->getSkinUrl("js/overlay.js") ?>"
        
}));
    
});
//]]>
</script>

Then there’s always the “before_body_end” block in Magento. You can insert various bottom loading javascript down there when necessary if it doesn’t need to be deferred to after DOM load. Then reference it in the layout for the pages where you need it to load.

 
Magento Community Magento Community
Magento Community
Magento Community
 
goivvy
Guru
 
Avatar
Total Posts:  322
Joined:  2010-12-15
Moscow, Russia
 

Hi,

be sure to read this forum post http://www.magentocommerce.com/boards/viewthread/424093/

We’ve developed and successfully implemented the DeferJS extension that attempts to implement defer js logic on your magento store.

Check it out

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top