-
-
Save devdays/723795c8504754f3e2a4 to your computer and use it in GitHub Desktop.
Object JavaScript - Loading big template using Infuser
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Infuser Page Load</title> | |
</head> | |
<body> | |
<div> | |
<input id="btnTemplate" type="button" value="Say Hello!"> | |
<span id="msg"></span> | |
</div> | |
<div id="target"></div> | |
<script type="text/javascript" src="Scripts/jquery-2.0.0.js"></script> | |
<script type="text/javascript" src="Scripts/TrafficCop.js"></script> | |
<script type="text/javascript" src="Scripts/infuser.js"></script> | |
<script> | |
var toggled = false; | |
$(function () { | |
// pre-loading image for our custom "loading template" | |
var loadingImg = $('<img />').attr('src', './images/ajax-loader.gif'), | |
origRender = infuser.defaults.render; | |
$('#btnTemplate').click(function () { | |
infuser.defaults.templateUrl = "./templates"; | |
infuser.defaults.loadingTemplate.content = | |
"<div class='infuser-loading'>" + | |
"<img src='./images/ajax-loader.gif'>Loading...</div>" | |
infuser.defaults.loadingTemplate.transitionOut = function () { }; | |
infuser.infuse("Hello", { | |
target: "#target", | |
render: function (target, template) { | |
// really ugly way to simulate long running template retrieval | |
setTimeout(function () { | |
origRender(target, template); | |
}, 4000); | |
}, | |
postRender: function (target) { | |
if (!toggled) { | |
$("#msg").text("Click uses a locally cached template"); | |
} | |
} | |
}); | |
}); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment