move some external script loading into app.on('render') to see if that

solves https://groups.google.com/forum/?fromgroups=#!topic/derbyjs/x8FwdTLEuXo
This commit is contained in:
Tyler Renelle 2013-03-30 18:45:57 -07:00
parent d90f594cb8
commit c9907f9558
2 changed files with 26 additions and 20 deletions

View file

@ -9,9 +9,9 @@ restoreRefs = module.exports.restoreRefs = (model) ->
model.refList "_#{type}List", "_user.tasks", "_user.#{type}Ids"
###
Loads JavaScript files from (1) public/js/* and (2) external sources
Loads JavaScript files from public/js/*
If a library is available in a CDN, we put it in <Scripts:> (index.html) for better caching. If not, we use
this function to utilize require() to concatinate for faster page load, and $.getScript for asyncronous external script loading
this function to utilize require() to concatinate for faster page load
###
loadJavaScripts = (model) ->
@ -24,19 +24,6 @@ loadJavaScripts = (model) ->
require '../../public/vendor/bootstrap-tour/bootstrap-tour'
# JS files not needed right away (google charts) or entirely optional (analytics)
# Each file getsload asyncronously via $.getScript, so it doesn't bog page-load
unless model.get('_view.mobileDevice')
$.getScript("//s7.addthis.com/js/250/addthis_widget.js#pubid=lefnire");
# Google Charts
$.getScript "//www.google.com/jsapi", ->
# Specifying callback in options param is vital! Otherwise you get blank screen, see http://stackoverflow.com/a/12200566/362790
google.load "visualization", "1", {packages:["corechart"], callback: ->}
# Note, Google Analyatics giving beef if in this file. Moved back to index.html. It's ok, it's async - really the
# syncronous requires up top are what benefit the most from this file.
###
Setup jQuery UI Sortable
@ -189,6 +176,26 @@ module.exports.resetDom = (model) ->
DERBY.app.dom.clear()
DERBY.app.view.render(model, DERBY.app.view._lastRender.ns, DERBY.app.view._lastRender.context);
###
Load external scripts that need re-calculation on page re-write
###
loadExternalScripts = (model) ->
$.getScript('//checkout.stripe.com/v2/checkout.js')
# JS files not needed right away (google charts) or entirely optional (analytics)
# Each file getsload asyncronously via $.getScript, so it doesn't bog page-load
unless model.get('_view.mobileDevice')
$.getScript("//s7.addthis.com/js/250/addthis_widget.js#pubid=lefnire")
# Google Charts
$.getScript "//www.google.com/jsapi", ->
# Specifying callback in options param is vital! Otherwise you get blank screen, see http://stackoverflow.com/a/12200566/362790
google.load "visualization", "1", {packages:["corechart"], callback: ->}
# Note, Google Analyatics giving beef if in this file. Moved back to index.html. It's ok, it's async - really the
# syncronous requires up top are what benefit the most from this file.
module.exports.app = (appExports, model, app) ->
loadJavaScripts(model)
setupGrowlNotifications(model) unless model.get('_view.mobileDevice')
@ -199,6 +206,7 @@ module.exports.app = (appExports, model, app) ->
setupTooltips(model)
setupTour(model)
initStickyHeader(model) unless model.get('_view.mobileDevice')
loadExternalScripts(model)
$('.datepicker').datepicker({autoclose:true, todayBtn:true})
.on 'changeDate', (ev) ->
#for some reason selecting a date doesn't fire a change event on the field, meaning our changes aren't saved

View file

@ -61,8 +61,6 @@
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-growl/1.0.0/jquery.bootstrap-growl.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.0.0/js/bootstrap-datepicker.min.js"></script>
<script src="https://checkout.stripe.com/v2/checkout.js"></script>
{{#if equal(_view.nodeEnv,"production")}}
<!-- Google Analytics -->
<script type="text/javascript">