Make a Web Page Appear Fully Loaded, or jQuery to MooTools Translation
Question
I want a web page to appear in the browser only after it finished loading all its elements.
My usual solution is to delay showing the page until after all the elements finished loading. I use this in CSS:
body {
opacity: 0;
}
– and place this jQuery snippet in the <head> of the page
<script type="text/javascript">
$(window).load(function() {
$('body').animate({opacity: 1}, 300);
});
</script>
– to smoothly fade in the complete page.
However, the page I'm working on has MooTools library linked to it. I do not want to make the page even heavier by linking jQuery to it, as well, but I'm unfamiliar with MooTools, and could use a bit of help.
Question: what's the exact MooTools translation of the jQuery snippet I typed above?
Thank you in advance for your help!
2 answers
solution1
2 ACCPTED 2013-04-08 02:39:31
I belive you are looking for this:
window.addEvent('load', function() {
$$('body').set('morph', {duration: 300}).morph({'opacity': '1'});
});
source here
morph instead of animate in mootools source here
Further Info
So $('block') is like saying getElementById('block') gets <div id="block"></div>
$$('body') is like getElementsByTagName(body) gets <body></body>
$$('.block') will also get <div class="block"></div>
great source here
solution2
1 2013-04-08 02:40:26
window.addEvent('domready', function () {
$("gallery").set('morph', {duration: 3000})
.morph({opacity: 1});
});
http://jsfiddle.net/ExplosionPIlls/9tqxr/
'load' will probably work too, but from what I can see domready seems to be preferred.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.